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