vue中什么是$nextTick?

$nextTick：将回调函数延迟到dom更新数据后调用。

<template>
  <div class="NextTickVue">
    <p ref="msg">msg:{{ message }}</p>
    <p>msg1:{{ message1 }}</p>
    <button @click="changeMessage">改变message</button>
  </div>
</template>

<script>
export default {
  name: "NextTickVue",
  data() {
    return {
      message: "hello",
      message1: ""
    }
  },
  methods: {
    changeMessage() {
      this.message = "你好啊同学！";
      console.log(this.$refs.msg.innerHTML);
      this.message1=this.$refs.msg.innerHTML;
    },
  }
}
</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

改变message前：

改变message后：

经过上面两张结果运行图比较，可以看出，message1拿到的是message改变的数据，是因为vue是异步渲染的框架，数据更新是异步的，数据更新之后，dom是不会立即渲染

解决办法

1、使用定时器

 changeMessage() {
      this.message = "你好啊同学！";
      //解决方法1：通过定时器
     setTimeout(() => {
         this.message1 = this.$refs.msg.innerHTML;
       }, 2000);
    }
1
2
3
4
5
6
7

2、$nextTick

$nextTick会在渲染之后被触发，用来获取最新的dom节点；

$nextTick的应用场景：

1. 想要在生命周期函数created中进行dom操作，一定要放到$nextTick函数中进行；
2. 在数据变化后再来执行某个操作，而这个操作需要使用随数据变化而变化的dom结构时，这个操作需要放到$nextTick中

 changeMessage() {
      this.message = "你好啊同学！";
      //  解决方法2：$nextTick
        this.$nextTick(() => {
          this.message1 = this.$refs.msg.innerHTML;
        })
    }
1
2
3
4
5
6
7