做优秀企业网站,中铁建设集团门户密码,seo培训师,兰州网站建设哪家公司好这里是引用 vue2-nextTick
1. 什么是nextTick
先来看官方定义
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法#xff0c;获取更新后的DOM云里雾里#xff0c;啥意思呢#xff0c;其实本质就是事件循环、同步和异步的问题不懂事件循环相关问题的… 这里是引用 vue2-nextTick
1. 什么是nextTick
先来看官方定义
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法获取更新后的DOM云里雾里啥意思呢其实本质就是事件循环、同步和异步的问题不懂事件循环相关问题的 看这篇文章 一文大白话讲清楚javascript同步任务异步任务主线程宏任务微任务,事件循环以及async和await等关系说白了就是VUE在更新DOM时是异步执行的会开启一个异步更新队列等待在下一个事件循环中执行这个队列中的所有修改。那么问题就来了有时候我在更新完数据后想拿到更新后的DOM怎么办因为这时候DOM更新可能还在队列里面等待执行呢这时候我就创建一个回调函数把这个函数添加到微任务队列中在更新队列执行完后会执行所有的微任务队列的回调函数这样保证回调函数在更新队列执行完之后执行这个时候我们就可以在回调函数里面获取到更新后的DOM了那我们怎么把回调函数添加到微任务队列里面呢就是通过nextTick
2. nextTick的使用
Vue.nextTickcallback和this.nextTickcallback都可以实现我们实现一个计数器利用nextTick获取更新后的DOM
templatedivp{{count}}/pbutton clickaddADD/button/div
/template
scriptexport default{data(){return{count:0}},methods:{add(){this.count}}}
/script在这个组件中我们有一个计数器和一个按钮每次点击按钮计数器增加1如果我们在计数器更新后想要拿到更新后的DOM就可以使用nextTick methods:{add(){this.countthis.nextTick((){console.log(this.$el.textContent)})}
}3. nextTick的应用场景
在更新DOM后获取DOM状态在更新DOM后执行依赖于DOM的操作在更新DOM后执行第三方库
