nextTick的作用和使用场景?
vue中的nextTick主要用于处理数据动态变化后,DOM还未及时更新的问题,用nextTick就可以获取数据更新后最新DOM的变化
注意:数据更新和DOM更新不是同步,是异步的
使用场景
例如:改变dom元素,针对第三方插件(针对dom,swiper,滚动)的集成
<div class="boo">
<div ref="box">{{msg}}</div>
<button @click="getMsg">获取消息</button>
</div>
<script>
export default {
name: "List",
data() {
return {
msg: "可以在数据变化之后立即使用"
};
},
methods: {
getMsg() {
console.log('前: ',this.$refs.box.innerHTML);
this.msg = '1906A'
this.$nextTick(()=>{
console.log('hou: ',this.$refs.box.innerHTML);
})
}
}
};
</script>