官网介绍:
Vue.nextTick( [callback, context] )
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
(是不是不懂官网在说啥,写个例子看看)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<template> <div class="hello"> <h1 ref='h1'>{{ msg }}</h1> <h2>{{msg1}}</h2> <h3>{{msg2}}</h3> <h4>{{msg3}}</h4> <div @click="changeMsg">点击修改</div> </div> </template> <script> export default { name: 'HelloWorld', data () { return { msg: '旧内容', msg1:'', msg2:'', msg3:'' } }, methods:{ changeMsg(){ this.msg='新内容'; this.msg1=this.$refs.h1.innerHTML this.$nextTick(()=>{ this.msg2=this.$refs.h1.innerHTML }) // 获取dom元素得内容 在data更新之前发生 所以导致了获取到没修改得旧内容 this.msg3=this.$refs.h1.innerHTML } } } </script>
结果
= 》
结果:msg1和msg3显示的内容是旧内容,而msg,msg2显示的内容是新内容。
由于 获取dom元素得内容 在data更新之前发生 所以导致了获取到没修改得旧内容
Vue中DOM更新是异步的
nextTick使用场景:
1.vue生命周期:created()中,由于此处dom得挂载还没完成,渲染也没有完成,data观测完成,想要获取dom的内容 或者操作dom 需要用nextTick
2.在数据改变之后,需要执行某些dom的结构,内容上的操作的时候,用nextTick可以确保活取到数据改变以后的dom,数据
Vue中DOM异步更新和nextTick的关系:
Vue异步执行DOM更新过程:数据变化,Vue将开启一个队列,将所有数据的变化都存储起来,到一定时间后,再统一更新。如果同一数据多次变化,呗watcher多次检测到,只会存储一次,最后那次的变化,在下一次更新渲染dom的事件循环“tick”中,执行操作。
异步执行操作:基于原生Promise.then和MessageChannel,若环境不支持(IE)则采用setTimeout来延迟执行。