设置 $refs.theReference 后运行代码

【问题标题】：Run code when $refs.theReference has been set设置 $refs.theReference 后运行代码
【发布时间】：2017-04-18 22:04:03
【问题描述】：

我正在动态显示/隐藏画布，当它即将显示时，我想在其上进行绘制。我使用data 变量 (true/false) 来插入/删除画布，并在此值更改时使用watch 在其上绘制。我在画布上添加了一个ref=canvas 以获取对画布DOM 元素的引用，但是当我的watch 回调被调用时，this.$refs.canvas 尚未被分配任何值。

这是一个例子：

http://jsfiddle.net/3v9Lbjbr/3/

除了使用setTimeout 推迟绘图操作之外，还有什么好的方法可以解决这个问题？

【问题讨论】：

标签： vue.js

【解决方案1】：

您可以使用 Vuejs 提供的 $nextTick 方法。
您可以在文档中了解更多信息：https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue

以下是您的用例示例：

var demo = new Vue({
    el: '#demo',
    data: {
        showCanvas: false,
    },
    methods: {
    	show: function(){
      	this.showCanvas = true
      }
    },
    watch: {
      'showCanvas': function() {
        this.$nextTick(function() {
          alert(this.$refs.canvas);
        }.bind(this))
      }
    }
})

canvas{
  background-color: red;
}

<div id="demo" v-cloak>
   <p v-on:click="show">
   Show canvas.
   </p>
   <canvas v-if="showCanvas" ref="canvas"></canvas>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>

【讨论】：