vue2与vue3中nextTick基本应用

一、前言

1、nextTick()是什么？

nextTick()，延迟代码执行，是将回调函数的逻辑延迟在下一次dom更新后调用，简单的理解是：当数据更新时，在dom渲染后，自动执行该函数。

2、为什么要用nextTick()？

Vue采用异步渲染，简单来说就是为了提升性能，因为不采用异步更新，在每次更新数据都会对当前组件进行重新渲染，为了性能考虑，Vue会在本轮数据更新后，再去异步更新视图。如果我们想要在数据更新后进行dom操作，就需要用到nextTick(),，使用它可以让我们获取到最新的dom。

二、 nextTick的注释详解（vue2）

<template>
  <div class="box">
    <h1 ref="text">{{ value }}</h1>
    <button type="danger" @click="setCont">点击</button>
    <div style="height: 20px;"></div>
    <button type="danger" @click="changeCont">疯狂点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "Hello Le!",
    };
  },
  created() {

  },
  methods: {
    setCont() {
      // 如果直接打印，打印结果是 Hello Le!，因为this.value = "你好,乐!"是异步的
      this.value = "你好,乐!"
      console.log(this.$refs["text"].innerText); // Hello Le!
      // 通过this.$nextTick在下次dom更新时执行,则能够获取到最新的值
      this.$nextTick(() => {
        // 页面dom中的数据渲染完之后，再执行回调函数中的逻辑。
        console.log(this.$refs["text"].innerText); // 你好,乐!
      });
    },
    changeCont() {
      // 即使数据变化在后，依旧会延迟在下次dom更新时执行
      this.$nextTick(() => {
        console.log(this.value);// 你好,乐!
      });
      this.value = "你好,乐!"
    },
  },
}
</script>
<style lang="scss" scoped></style>

三、 nextTick的注释详解（vue3）

<template>
  <div>
    <div ref="myDiv">{{ myText }}</div>
    <button @click="setText">点击</button>
  </div>
</template>  
  
<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const myDiv = ref(null);
    const myText = ref('Hello,world!');
    const setText = () => {
      myText.value = 'Hello,le!';
      // 此时因为异步渲染无法获取DOM元素内容
      console.log(myDiv.value.innerHTML); // Hello,world!
      // 使用nextTick延迟执行代码，直到DOM更新完成  
      nextTick(() => {
        // 此时可以访问最新的DOM元素  
        console.log(myDiv.value.innerHTML); // Hello,le!
      });
    }
    return { myDiv, myText, setText };
  },
};  
</script>