vue之理解异步更新 --- nextTick
2017-05-28 14:35
627 查看
默认情况下,vue中DOM的更新是异步执行的,理解这一点非常重要。
当侦测到数据变化时,Vue会打开一个队列,然后把在同一个事件循环(event loop)当中观察到的数据变化的watcher推送进入这个队列,加入一个watcher在一个事件循环中被触发了多次,它只会被推送到队列中一次, 然后在进入下一次的事件循环时,Vue会清空队列并进行必要的DOM更新,。在内部,Vue 会使用
举例来说:
当你设置 vm.someDate = ' new value ' 时, DOM并不会马上更新,而是在异步队列中被清楚, 也就是在下一个事件循环中开始执行更新, 如果你希望通过更新的DOM状态去做某些事情,那么就必须留意这个细节, 尽管vue.js鼓励开发者用“数据驱动”的方式想问题,避免直接操作DOM,但是有时候你可能是想要使用某个熟悉的jQuery插件这种情况该怎么办呢?
你可以在数据改变之后,理解调用 Vue.nextTick(callback),并把你要做的事情放在回调函数中。 当Vue.nextTick的回调函数执行时,DOM就是已经更新后的状态了。
实例:
通过这个例子就可以很好的理解了。
除此之外,也有一个实例方法 vm.$nextTick() ,这个方法和全局的Vue.nextTick 的功能一样,但是更方便在组件内部使用,因为它不需要全局的Vue变量, 另外它的回调函数中的 this上下文 会自动绑定到它的Vue实例中。
参考文章: 细节与最佳实践
当侦测到数据变化时,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' }) } } })
参考文章: 细节与最佳实践
相关文章推荐
- 从Vue.js源码看异步更新DOM策略及nextTick
- Vue.js异步更新DOM策略及nextTick
- 从Vue.js源码看异步更新DOM策略及nextTick
- 从Vue.js源码看异步更新DOM策略及nextTick
- ajax异步更新的理解
- Vue 异步事件更新 & 异步Dom更新解决方案
- vue在使用ECharts时的异步更新和数据加载详解
- 关于Handler在异步更新UI作用的一些理解
- 正确理解使用Vue里的nextTick方法
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
- Vue.js源码解析(八)【Vue.js异步更新DOM策略及nextTick】
- 从Vue.js源码看异步更新DOM策略及nextTick
- Vue学习之源码分析--Vue.js异步更新DOM策略及nextTick(八)
- 详解从Vue.js源码看异步更新DOM策略及nextTick
- Ajax网页实现异步更新----理解
- 简单理解Vue中的nextTick方法
- vue绑定v-modal布尔值到checkbox后异步,部分手机更新不及时问题
- vue 异步更新队列 $nextTick
- 简单理解Vue中的nextTick
- vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制