理解 vm.$nextTick

 

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

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

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，有些同学可能不大理解什么叫 DOM is now updated，在深入响应式原理 - vue.js中的示例情况也比较罕见，Vue 模板中直接在根无素中进行插值，然后在实例方法中使用了 this.$el.textContent 来获得更新之后的 DOM。为了更好地理解这一点，修改示例如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test</title>
 5     </head>
 6     <body>
 7         <script src="https://unpkg.com/vue/dist/vue.js"></script>
 8         <div class="app">
 9           <div ref="msgDiv">{{msg}}</div>
10           <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
11           <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
12           <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
13           <button @click="changeMsg">
14             Change the Message
15           </button>
16         </div>
17         <script type="text/javascript">
18             new Vue({
19               el: '.app',
20               data: {
21                 msg: 'Hello Vue.',
22                 msg1: '',
23                 msg2: '',
24                 msg3: ''
25               },
26               methods: {
27                 changeMsg() {
28                   this.msg = "Hello world."
29                   this.msg1 = this.$refs.msgDiv.innerHTML
30                   this.$nextTick(() => {
31                     this.msg2 = this.$refs.msgDiv.innerHTML
32                   })
33                   this.msg3 = this.$refs.msgDiv.innerHTML
34                 }
35               }
36             })
37         </script>
38     </body>
39 </html>

点击按钮前的界面：

点击按钮之后，界面如下，注意观察三个条件渲染的结果之间的差异。

 

 

看完这个示例，也许有人会问，我在 Vue 实例方法中修改了数据，然后再在 $nextTick 回调中获取该数据在相应 DOM 元素所绑定的内容（或属性）殊无必要，我为什么需要这样的 API 呢？

考虑这样一种场景，你有一个 jQuery 插件，希望在 DOM 元素中某些属性发生变化之后重新应用该插件，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

 

posted @ 2018-06-28 15:41  秀&莹&锐  阅读(445)  评论(0)  编辑  收藏  举报