vue的$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本质是一种优化策略