Vue.nextTick()的正确使用
2017-09-05 16:54
525 查看
Vue异步执行DOM更新。只要观察导数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变,如果同一个watcher被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和DOM
操作上非常重要。然后,在下一个事件循环‘tick’中,Vue刷新队列并执行实际(已去重的)工作。
虽然Vue.js通常鼓励开发人员沿着‘数据驱动’的方式思考,避免直接接触DOM,但是有时我们确实要这么做。为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用
Vue.nextTick(callback) 这样回调函数在DOM更新完成后就会调用
在组件内使用
我理解的官方文档的这句话的侧重点在最后那半句
在数据变化后要执行的
原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = 'new value',DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
部分摘自:https://segmentfault.com/a/1190000008570874
操作上非常重要。然后,在下一个事件循环‘tick’中,Vue刷新队列并执行实际(已去重的)工作。
虽然Vue.js通常鼓励开发人员沿着‘数据驱动’的方式思考,避免直接接触DOM,但是有时我们确实要这么做。为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用
Vue.nextTick(callback) 这样回调函数在DOM更新完成后就会调用
在组件内使用
vm.$nextTick()实例方法特别方便,因为它不需要全局
Vue,并且回调函数中的
this将自动绑定到当前的 Vue 实例上:
Vue.component('example', { template: '<span>{{ message }}</span>', data: function () { return { message: '没有更新' } }, methods: { updateMessage: function () { this.message = '更新完成' console.log(this.$el.textContent) // => '没有更新' this.$nextTick(function () { console.log(this.$el.textContent) // => '更新完成' }) } } })
我理解的官方文档的这句话的侧重点在最后那半句
获取更新后的DOM,获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个
获取更新后的DOM的Vue方法。所以放在
Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码,比如
Swiper扩展包的
var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', paginationClickable: true, spaceBetween: 30, centeredSlides: true, autoplay: 2500, autoplayDisableOnInteraction: false });
什么时候需要用的Vue.nextTick()
你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在
Vue.nextTick()的回调函数中。原因是什么呢,原因是在
created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进
Vue.nextTick()的回调函数中。与之对应的就是
mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。
在数据变化后要执行的
某个操作,而这个
操作需要使用随数据改变而改变的DOM结构的时候,这个
操作都应该放进
Vue.nextTick()的回调函数中。
原因是,Vue是异步执行dom更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。
当你设置 vm.someData = 'new value',DOM 并不会马上更新,而是在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。
部分摘自:https://segmentfault.com/a/1190000008570874
相关文章推荐
- 关于Vue.nextTick()的正确使用
- vue2.0 正确理解Vue.nextTick()的用途
- 详解Vue + Vuex 如何使用 vm.$nextTick
- Vue--Vue.nextTick()的使用
- 饿了么项目---7、深度响应式原理与Vue.$nextTick()的使用(2)
- vue nextTick深入理解-vue性能优化、DOM更新时机、事件循环机制
- Node.js中的process.nextTick使用实例
- Vue $nextTick
- Vue $nextTick
- Vue中正确使用jQuery的方法
- Vue.nextTick和Vue.$nextTick
- Vue源码小问答二:Vue.nextTick的用法
- vue init webpack-simple 模板中全局引入Jquery正确使用方法 可保jQuery插件正常使用
- 深入理解Vue nextTick 机制
- Vue.nextTick()函数
- vue(1) -- this.$nextTick
- 在vue中操作DOM--this.$nextTick()
- 什么时候需要用的Vue.nextTick()
- Vue.nextTick()
- vue nextTick深入理解---vue性能优化、DOM更新时机、事件循环机制