Vue中的$nextTick()

Vue中的$nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM

看一个例子

<template>
    <div class=''>
        <span class="span" v-if="show">uu盘</span><br>
        <button @click="change">点击</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show:false
        };
    },
    mounted() {},
    methods: {
        change() {
            this.show = true
            let dv = document.querySelector('.span')
            console.log(dv);	// null
  
            this.$nextTick(()=>{
                let dv = document.querySelector('.span')
                console.log(dv);    // <span class="span">uu盘</span>
            })
        }
    },
    components:{}
};
</script>

原理
vue是异步渲染的，当data改变之后，DOM不会立刻被渲染，页面渲染时会将data的修改做整合，多次data修改只会做整合最后一次性渲染出来，这也是异步渲染的原因。只有异步渲染才可以实现整合操作。

应用场景

1. 在created里面获取dom节点
2. 改变数据之后立刻获得dom节点，进行逻辑操作

例如点击按钮出现input框，并获取焦点

showInput(item) {
    item.inputShow = true
    this.$nextTick(()=>{
        this.$refs.saveTagInput.focus()
    })
},