$nextTick

$nextTick是一个生命钩子，我们可以理解成，Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新

先简单写一个$nextTick的例子

<template>
	<div class="app">
        <div v-if="isShow">
            <input ref="inp" type="text" v-model="change">
            <button>确定</button>
        </div>
        
        <div v-else>
            <span>{{ title }}</span>
            <button @click="handleChange">编辑</button>
        </div>
	</div>
</template>
<script>
export default {
	name: 'app',
	data(){
        return {
            title:'标题',
            change:'',
            isShow:false
        }
    },
    methods:{
        handleChange(){
            this.isShow = true
        }
    }
}
</script>

我们的要求是点击编辑展示输入框并立刻获取焦点

handleChange(){
 	this.isShow = true
    this.$ref.inp.focus()
}

要是按照我们正常思维去想的话，我们会直接使用this.$ref.inp.focus()获取

但是这样会报错，因为Vue是异步更新DOM的，所以我们就需要用到$nextTick

handleChange(){
    this.isShow = true
    this.$nextTick(()=>{
        this.$refs.inp.focus()
    })
}

下面是$nextTick与setTimeout的区别

<template>
	<div class="app">
        <button @click="func">确定</button>
	</div>
</template>
<script>
export default {
	name: 'app',
    methods:{
        func(){
            console.log(11111111);
            setTimeout(()=>{
                console.log(222222222222);
            })
            this.$nextTick(()=>{
                console.log(33333333333);
            })
            console.log(4444444444);
        }
    }
}
</script>

<style scoped="scoped">
	
</style>

打印结果为

我们可以看到先打印333333在打印2222222
所以$nextTick比setTimeout先执行