2021-07-22

$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更新是异步的