谈谈 nextTick

是什么

数据的变动不会导致视图立即渲染。当修改数据后，如果想尽早得到渲染后的 DOM，可以使用

this.$nextTick(() => {})

nextTick 的原理是什么

原理：

任务去重后放入微任务队列，当执行完同步代码会自动遍历执行微任务队列中的任务。

怎么用

<div id="root">
    <button type="button" @click="change()" ref="btn">{{content}}</button>
</div>

const vm = new Vue({
    el:"#root",
    data(){
        return{
            content:"初始值1"
        }
    },
    methods:{
        change(){
            this.content:'改变值2'
            console.log(this.$refs.btn.innerText)
        }
    }
})

当点击按钮了以后页面发生改变，但获取的值还是上一次的值

如果想获取 dom 更新后的值就需要用到 nextTick 出场了

<div id="root">
    <button type="button" @click="change()" ref="btn">{{content}}</button>
</div>

const vm = new Vue({
    el:"#root",
    data(){
        return{
            content:"初始值1"
        }
    },
    methods:{
        change(){
            this.content:'改变值2'
            this.$nextTick(()=>{
                console.log(this.$refs.btn.innerText)
            })
        }
    }
})

参考文章

• nextTick 的使用