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="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' }) } } })
参考文章: 细节与最佳实践