文章目录
- $nextTick有什么作用?
- 一、NextTick是什么
- 二、为什么要有`nextTick`?
$nextTick有什么作用?
一、NextTick是什么
官方对其的定义
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM
什么意思呢?
我们可以理解成,Vue
在更新 DOM
时是异步执行的。当数据发生变化,Vue
将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新
场景1:
<p ref="continer">{{ msg }}</p>
<button @click="change()">改变</button>
data() {
return {
msg: '你好'
}
},
methods: {
change() {
this.msg += '呀'
console.log(this.$refs.continer.innerText)
// 解决方法
// this.$nextTick(() => {
// console.log(this.$refs.continer.innerText)
// })
}
},
这时候想获取页面最新的DOM
节点,却发现获取到的是旧值
console.log(this.$refs.continer.innerText) // 你好
因为,点击事件触发后,vue会把对应方法内的任务执行完以后,再进行页面渲染,所以,拿到的是老的值。
场景2:
<p v-if="!isEdit">姓名:{{ name }}</p>
<p v-if="isEdit">姓名: <input type="text" ref="ipt" v-model="name" /></p>
<br />
<button @click="change">编辑</button>
data() {
return {
name: 'test',
isEdit: false
}
},
methods: {
change() {
this.isEdit = true
// 此时,我想直接获取焦点,行不通
//因为Dom还没更新的时候就已经执行了这行代码,所以获取不到焦点
// this.$refs.ipt.focus()
this.$nextTick(() => {
this.$refs.ipt.focus()
})
}
},
二、为什么要有nextTick
?
举个例子
{{num}}
for(let i=0; i<100000; i++){
num = i
}
如果没有 nextTick
更新机制,那么 num
每次更新值都会触发视图更新(上面这段代码也就是会更新10万次视图),有了nextTick
机制,只需要更新一次,所以nextTick
本质是一种优化策略