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>

改变message前：

改变message后：

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

解决办法

1、使用定时器

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

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;
        })
    }