vue -- 理解Vue.nextTick 的原理和用途

有同学在看 Vue 官方文档时，对 API 文档中的 Vue.nextTick 和 vm.$nextTick 的作用不太理解。

其实如果看一下深入响应式原理 - vue.js中的有关内容，可能会有所理解，不过有些同学可能看到这个标题之后就选择跳过了，因此这里简述如下：

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用$ nextTick，则可以在回调中获取更新后的 DOM，API 文档中官方示例如下：


     
     
       
       
        
        
       
       
       
       
        
        
         
         new Vue({
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
           // …
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
           methods: {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             // …
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             example: function () {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               // modify data
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               this.message = ‘changed’
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               // DOM is not updated yet
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               this.$nextTick(function () {
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
                 // DOM is now updated
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
                 // `this` is bound to the current instance
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
                 this.doSomethingElse()
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
               })
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
             }
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
           }
        
        
       
       

       
       
        
        
       
       
       
       
        
        
         
         })

有些同学可能不大理解什么叫 DOM is now updated，在深入响应式原理
- vue.js中的示例情况也比较罕见，Vue 模板中直接在根无素中进行插值，然后在实例方法中使用了 this.$el.textContent 来获得更新之后的 DOM。

为了更好地理解这一点，修改示例如下：

模板——

<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>

new Vue({ el: '.app', data: { msg: 'Hello Vue.', msg1: '', msg2: '', msg3: '' }, methods: { changeMsg() { this.msg = "Hello world." this.msg1 = this.$refs.msgDiv.innerHTML this.$nextTick(() => { this.msg2 = this.$refs.msgDiv.innerHTML }) this.msg3 = this.$refs.msgDiv.innerHTML } } })