vue3 第二十九节（vue3 事件循环之nextTick）

引言

vue 项目中为什么要使用 nextTick 这个函数，是做什么用的，解决了哪些问题

1、nextTick 作用

用于处理DOM更新完成之后，执行回调函数的方法；

2、实现方案

vue2 中 nextTick() 是基于浏览器的 异步队列和微任务队列而执行的；
vue3 中 nextTick() 是基于 MutationObserver 和Promise.resolve().then() 来实现的；解决了vue2 中 Promise() 的浏览器缺陷；

vue3 中使用 Promise 封装 nextTick

如：

复制代码

const promise = Promise.resolve()
export function nextTick(callback?:Function){
    return promise.then(callback)
}

在 Vue 3 中 nextTick() 方法的行为和 Vue 2 中基本相似，但它进行了一些优化，以提高性能和稳定性。nextTick() 通过利用微任务（microtask）来确保在 DOM 更新之后执行回调，从而避免在同一事件循环中执行 DOM 操作。简单的理解是，当数据更新了，在dom中渲染后，自动执行函数。

复制代码

<script setup>
import { ref, nextTick, onMounted } from 'vue'

onMounted(async() => {
    await nextTick()
    // 在nextTick 下面的 js 都是属于异步的，都会等待 DOM更新完成之后再进行数据更新
    // 或者  如下 两种方式均可
    // await nextTick(() => {

    // })
})
</script>

3、nextTick 使用场景

a、在数据变化后等待DOM更新

比如更改了一个数据属性，该属性控制一个元素的可见性。然后你可能想要等待DOM更新以便可以获取该元素的新的宽度或高度。在这种情况下，你可以使用 nextTick() 来确保你的代码在DOM更新后执行。

复制代码

<template>  
    <div ref="nameBox">{{ message }}</div>  
</template>  
    
<script setup>  
import { ref, nextTick } from 'vue';  
    const message = ref('Andy');  
    const nameBox = ref(null);  
    const  updateMessage = () => {  
        message.value = 'Other name!';  
        nextTick(() => {  
            console.log(nameBox.value.textContent); // 输出: Other name!  
        });  
    }  
</script>

b、在创建或销毁组件后等待DOM更新

当创建或销毁Vue组件时，Vue需要时间来更新DOM。如果你需要立即访问新创建或已销毁的DOM元素，你可能会遇到问题，因为DOM可能还没有更新。在这种情况下，你可以使用 nextTick() 来确保你的代码在DOM更新后执行。

复制代码

<template>  
  <div>  
    <button @click="handleChangCom">显隐组件</button>  
    <ChildComponent v-if="isShowChild" ref="componentRef" />  
  </div>  
</template>  
  
<script setup>  
import { ref, nextTick } from 'vue';  
import ChildComponent from './ChildComponent.vue';  
  
    const isShowChild = ref(false);  
    const componentRef = ref(null);  
    //当我们点击按钮时，handleChangCom方法会被调用，从而修改 isShowChild 的值。
    //然后，我们使用nextTick()来等待Vue的DOM更新队列清空，确保如果ChildComponent被创建，
    //它现在已经被挂载到DOM上；如果它被销毁，它已经从DOM上移除。
    const handleChangCom = () => {  
      isShowChild.value = !isShowChild.value;  
      // 等待DOM更新  
      nextTick() 
      if (isShowChild.value) {  
        // 现在ChildComponent已经被创建并挂载到DOM上  
        console.log('Child component has been mounted:', componentRef.value);  
      } else {  
        // 现在ChildComponent已经被销毁并从DOM上移除  
        console.log('Child component has been unmounted.');  
      }  
    }  
 
</script>

c、在异步更新队列中插入自己的回调

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列 ，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次 。这种在缓冲时去除重复数据，对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环"tick"中，Vue 刷新队列并执行实际 (已去重的) 工作。

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用setTimeout(fn, 0) 代替。你可以通过 nextTick() 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

d、处理大量数据

在处理大量数据时，Vue.js 可能会变得有点慢，因为它需要时间来处理所有的数据并更新DOM。在这种情况下，你可能想要使用 nextTick() 来分批处理数据，以便给浏览器一些时间来更新DOM。这可以提高应用程序的性能，并减少用户在处理大量数据时的等待时间

复制代码

<template>  
  <div>  
    <div v-for="(item, index) in items" :key="index">{{ item }}</div>  
  </div>  
</template>  
  
<script setup>  
import { ref, nextTick } from 'vue';  
    const items = ref([]);  
    const fetchData = () => {  
      // 假设 getBatchListServer 是一个异步函数，用于从后台 
      getBatchListServer().then(newItems => {  
        items.value = newItems;  
        nextTick(() => {  
          console.log('All items are rendered');  
          // 这里可以执行依赖于所有项都已渲染的代码  
        });  
      });  
    }  
 
</script>

vue3 第二十九节 （vue3 事件循环之nextTick）

引言

1、nextTick 作用

2、实现方案

3、nextTick 使用场景

vue3 第二十九节（vue3 事件循环之nextTick）