首页 > 代码库 > vue之理解异步更新 --- nextTick
vue之理解异步更新 --- nextTick
默认情况下，vue中DOM的更新是异步执行的，理解这一点非常重要。
当侦测到数据变化时，Vue会打开一个队列，然后把在同一个事件循环（event loop）当中观察到的数据变化的watcher推送进入这个队列，加入一个watcher在一个事件循环中被触发了多次，它只会被推送到队列中一次， 然后在进入下一次的事件循环时，Vue会清空队列并进行必要的DOM更新，。在内部，Vue 会使用 MutationObserver 来实现队列的异步处理，如果不支持则会回退到 setTimeout(fn, 0)。
举例来说：
当你设置 vm.someDate = ‘ new value ‘ 时， DOM并不会马上更新，而是在异步队列中被清楚， 也就是在下一个事件循环中开始执行更新， 如果你希望通过更新的DOM状态去做某些事情，那么就必须留意这个细节， 尽管vue.js鼓励开发者用“数据驱动”的方式想问题，避免直接操作DOM，但是有时候你可能是想要使用某个熟悉的jQuery插件这种情况该怎么办呢？
你可以在数据改变之后，理解调用 Vue.nextTick(callback)，并把你要做的事情放在回调函数中。 当Vue.nextTick的回调函数执行时，DOM就是已经更新后的状态了。
实例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title> <script src=http://www.mamicode.com/"https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script></head><body><div id="example">{{msg}}</div> <script> var vm = new Vue({ el: "#example", data: { msg: "hello" } }); vm.msg = "zzw" alert(vm.$el.textContent === "zzw"); Vue.nextTick(function () { alert(vm.$el.textContent === "zzw"); }); </script></body></html>
通过这个例子就可以很好的理解了。
除此之外，也有一个实例方法 vm.$nextTick() ，这个方法和全局的Vue.nextTick 的功能一样，但是更方便在组件内部使用，因为它不需要全局的Vue变量， 另外它的回调函数中的 this上下文 会自动绑定到它的Vue实例中。
Vue.component(‘example‘, { template: ‘<span>{{msg}}</span>‘, data: function () { return { msg: ‘not updated‘ } }, methods: { updateMessage: function () { this.msg = ‘updated‘ console.log(this.$el.textContent) // => ‘not updated‘ this.$nextTick(function () { console.log(this.$el.textContent) // => ‘updated‘ }) } }})
参考文章： 细节与最佳实践
vue之理解异步更新 --- nextTick
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。