nextTick 使用场景

前言：
理论上，我们不应主动去操作DOM，因为Vue的核心思想就是数据驱动DOM，但在很多业务里，我们避免不了会操做一些DOM,这时我们就有可能用到$nextTick

$nextTick的作用：

延缓视图（DOM）的更新，获取数据更新后最新DOM的变化。

你想想如果你一个方法里要修改十个data里的值，那是不是要更新十次视图啊，是不是要做十次diff呢？？显然不是。
首先Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue将开启一个队列，并缓存在同一事件循环中发生的所有数据变更。这种在缓存时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的)工作。所以就有了nextTick()，是将回调函数延迟在下一次dom更新数据后调用,即当数据更新了在DOM中渲染后自动执行该函数，简单点说就算数据更新了，在dom中渲染后，自动执行该函数。

应用场景：

1、在vue生命周期的created()里进行DOM的操作一定要使用nextTick()，因为created()执行的时候DOM还未进行任何渲染。

<template>
  <div class="hello">
    <button ref="text">{{ msg }}</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '我是按钮的文字',
    }
  },
  created() {
  	console.log(this.$refs.text.innerHTML) //TypeError: Cannot read property 'innerHTML' of undefined
    that.$nextTick(function () {
      console.log(this.$refs.text.innerHTML) //我是按钮的文字
    })
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2、在方法里操作dom， 由于dom元素还没有更新， 因此打印出来的还是未改变之前的值，而通过this.$nextTick()获取到的值为dom更新之后的值 。

<template>
  <div class="hello">
    <button ref="text" @click="updateMessage">{{ msg }}</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '未更新',
    }
  },
  methods: {
  //nextTick返回的是 promise，所以可以结合async/await使用。
    async updateMessage() {
      this.msg= "已更新";
      console.log("nextTick方法前--->", this.$refs.text.textContent); // => '未更新'

      await this.$nextTick(function () {
        console.log("nextTick方法内--->", this.$refs.text.textContent); // => '已更新'
      });

      console.log("nextTick方法后--->", this.$refs.text.textContent); // => '已更新'
    },
  },
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

例如以下需求：
点击编辑，显示出输入框更改姓名

我们想在显示输入框的时候，顺便让输入框获取焦点，这样用户就可以直接输入，而不需要点一下输入框才能输入。

<div class="box">
      <span>姓名：span>
      <span v-show="!isShow">{{ name }}span>
      <input
        ref="iptRef"
        class="ipt"
        v-show="isShow"
        v-model="name"
        type="text"
      />
      <button class="btn" @click="handleEdit()">编辑button>
    div>
1
2
3
4
5
6
7
8
9
10
11
12

①我们可以将其放在定时器里，让同步任务执行完后在来执行这个宏任务。

handleEdit() {
  this.isShow = true;
  setTimeout(() => {
     this.$refs.iptRef.focus();
  });
},
1
2
3
4
5
6

②还可以将其放在 nextTick 里，让同步任务执行完后在来执行这个微任务。

    handleEdit() {
      this.isShow = true;
      this.$nextTick(function () {
        this.$refs.iptRef.focus();
      });
    },

1
2
3
4
5
6
7

3、在使用某个第三方插件时 ，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法，例如:应用滚动插件better-scroll时

参考：
https://www.cnblogs.com/jervy/p/14212104.html
https://blog.csdn.net/weixin_45932565/article/details/125692136
https://blog.csdn.net/weixin_45863359/article/details/122864123