Vue中的nextTick

DOM的改变，会触发事件。事件是同步执行的。

数据的更新，不会立刻触发视图的更新。在Vue中，DOM的变动是异步的。

 

如果想要得到数据更新后的dom对象，并执行操作。初始化时可以写在mounted中，此外可以写在nextTick这个api中。

Vue.nextTick（callback,执行上下文环境的this） --接收两个参数

 

Vue.nextTick里面有三个重要变量：callback(回调) pending（是否正在执行回调） timefunc(触发回调的函数)

 

将触发方式传给timefunc的三种实现：Promise MutationObserver(h5的api 监视dom的变化 回调可异步更新视图) 

setTimeout(fn,0)

 

实例：

 <div class="app">
        <div ref="msgDiv">{{msg}}</div>
        <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
        <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
        <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
        <button @click="changeMsg">
          Change the Message
        </button>
      </div>
    <script>
    new Vue({
        el: '.app',
        data: {
            msg: 'Hello Vue.',
            msg1: '',
            msg2: '',
            msg3: ''
        },
        methods: {
            changeMsg() {
            this.msg = "Hello word."
            this.msg1 = this.$refs.msgDiv.innerHTML
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML
            })
            this.msg3 = this.$refs.msgDiv.innerHTML
            }
        }
    })

重点：this.$nextTick() 这是异步调用的函数，它的回调 必须等待所有数据修改完毕，进行视图更新后被调用 

 

感谢作者分享https://www.jianshu.com/p/a7550c0e164f