$nextTick使用
Vue更新DOM-异步的·
目标: 点击count++, 马上通过"原生DOM"拿标签内容, 无法拿到新值
<template>
<div>
<h2>3. vue更新DOM是异步的</h2>
<p ref="myP">{{ count }}</p>
<button @click="btn">点击count+1, 马上提取p标签内容</button>
</div>
</template>
<script>
export default {
data () {
return {
count:1
}
},
methods: {
btn(){
// 累加更新 data 的数据
this.count++ // vue监测数据更新, 开启一个DOM更新队列(异步任务)
console.log('在外面',this.$refs.myP.innerHTML);
// 🔔:DOM 更新后,会挨个触发 $nextTick 里的回调函数
this.$nextTick(() => {
// 立刻获取 DOM 的内容
console.log('在 $nextTick 回调函数内',this.$refs.myP.innerHTML);
// 💥注意:Vue 更新 DOM 是异步的,更新 data 后还要进行 diff 算法等一系列操作,所以更新并 DOM 不是立刻的
})
}
}
}
</script>
<style>
</style>
总结: 因为DOM更新是异步的