$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先执行