理解vue中的nextTick

时间：2023-03-31 21:38:40 vue.js

结语：Vue中的nextTick涉及到Vue中DOM的异步更新1.示例：{{msg}}}

消息在$nextTick外：{{msg1}}

消息在$nextTick内：{{msg2}}

Messagegotoutside$nextTick:{{msg3}}

更改消息Vue实例newVue({el:'.app',data:{msg:'HelloVue.',msg1:'',msg2:'',msg3:''},methods:{changeMsg(){this.msg="Helloworld."这个.msg1=this.$refs.msgDiv.innerHTMLthis.$nextTick(()=>{this.msg2=this.$refs.msgDiv.innerHTML})this.msg3=this.$refs.msgDiv.innerHTML}}})点击前：点击后：从图中可以看出msg1和msg3显示的内容还是变换前，msg2显示的是变换后的内容。根本原因是Vue中的DOM更新是异步的（后面有详细解释）。2、应用场景：在Vue生命周期的created()钩子函数中进行的DOM操作，必须放在Vue.nextTick()的回调函数中。当数据变化后要执行的操作，而这个操作需要用到随数据变化而变化的DOM结构时，这个操作应该放在Vue.nextTick()的回调函数中，在Vue的官方文档中有详细说明：Vue异步执行DOM更新。只要观察到数据变化，Vue就会启动一个队列，并缓冲在同一个事件循环中发生的所有数据变化。如果同一个观察者被多次触发，它只会被推入队列一次。这种缓冲时的重复数据删除对于避免不必要的计算和DOM操作很重要。然后，在下一个事件循环“tick”中，Vue刷新队列并执行实际（去重）工作。Vue内部尝试使用原生的Promise.then和MessageChannel来实现异步队列。如果执行环境不支持，它将使用setTimeout(fn,0)代替。

上一篇：[vuex]unknownmutationtype

下一篇：微前端：SingleSpa实践总结

理解vue中的nextTick相关文章