Vue3 生命周期有哪些变化以及如何使用？

提问者：Terry2025.04.18浏览：120

vue3 问答

在Vue.js的发展历程中，Vue3相较于Vue2在生命周期方面有着显著的变化，这些变化不仅影响着开发者编写代码的方式，也为应用程序的性能优化和逻辑组织带来了新的机遇,下面将以问答形式详细探讨Vue3生命周期的相关问题。

Vue3 生命周期与 Vue2 生命周期有哪些不同？

在Vue2中，生命周期钩子函数是直接定义在组件的选项对象中，例如created、mounted等，而Vue3使用了Composition API，生命周期钩子函数需要通过setup函数中的onXxx形式来使用,比如在Vue2中：

export default {
  created() {
    console.log('Vue2 created hook');
  }
}

在Vue3中使用Composition API则是：

import { onCreated } from 'vue';
export default {
  setup() {
    onCreated(() => {
      console.log('Vue3 created hook');
    });
    return {};
  }
}

Vue3还新增了一些生命周期钩子，如onRenderTracked和onRenderTriggered，这两个钩子主要用于调试响应式系统。onRenderTracked会在组件渲染过程中追踪依赖时被调用，onRenderTriggered则在组件因依赖变化而重新渲染时被调用。

Vue3 各个生命周期钩子函数的触发时机是怎样的？

beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用，在Vue3中使用onBeforeCreate，由于setup函数在beforeCreate之前执行，所以在setup中不需要使用onBeforeCreate，因为setup本身的执行时机与之类似。
created：实例已经创建完成之后被调用，在这一步，实例已完成数据观测、属性和方法的运算，watch/event 事件回调，在Vue3中使用onCreated，可以在setup函数中通过onCreated(() => { /* 逻辑 */ })来定义。
beforeMount：在挂载开始之前被调用：相关的render函数首次被调用，在Vue3中使用onBeforeMount，同样在setup函数内定义。
mounted：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了，如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内，在Vue3中使用onMounted。
beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前，这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器，在Vue3中使用onBeforeUpdate。
updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，在Vue3中使用onUpdated，但要注意，在这个钩子函数中，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作，然而在大多数情况下，应该避免在此期间更改状态,因为这可能会导致更新无限循环。
beforeUnmount：实例在卸载之前调用，在这一步，实例仍然完全可用，在Vue3中使用onBeforeUnmount。
unmounted：实例卸载后调用，调用此钩子时，组件实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被卸载，在Vue3中使用onUnmounted。

如何在 Vue3 中使用生命周期钩子函数进行数据获取？

在Vue3中，可以在created或mounted钩子函数中进行数据获取，比如使用axios库获取数据：

import { onCreated } from 'vue';
import axios from 'axios';
export default {
  setup() {
    let data = reactive({
      items: []
    });
    onCreated(async () => {
      try {
        const response = await axios.get('/api/data');
        data.items = response.data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    });
    return {
      data
    };
  }
}

这里在onCreated钩子函数中，使用async/await来异步获取数据，并将数据赋值给响应式数据data.items，如果希望在组件挂载到DOM后再获取数据，可以使用onMounted。

Vue3 生命周期钩子函数中如何处理 DOM 操作？

在beforeMount钩子函数中，可以对即将挂载的DOM进行一些初始化操作，但此时实际的DOM还未挂载，而在mounted钩子函数中，DOM已经挂载完成，可以进行真实的DOM操作,要获取某个元素并添加一个类名：

<template>
  <div ref="targetDiv">Hello Vue3</div>
</template>
<script>
import { onMounted, ref } from 'vue';
export default {
  setup() {
    const targetDiv = ref(null);
    onMounted(() => {
      if (targetDiv.value) {
        targetDiv.value.classList.add('active');
      }
    });
    return {
      targetDiv
    };
  }
}
</script>

在setup函数中定义了一个ref来引用div元素，在onMounted钩子函数中通过targetDiv.value获取实际的DOM元素，并添加active类名。

如何在 Vue3 中使用生命周期钩子函数进行组件销毁相关操作？

当一个组件需要被销毁时，比如移除事件监听器、取消定时器等操作，可以在beforeUnmount和unmounted钩子函数中进行，在组件中添加了一个全局的滚动事件监听器,在组件销毁时需要移除它：

import { onBeforeUnmount, onMounted } from 'vue';
export default {
  setup() {
    const handleScroll = () => {
      console.log('Scroll event');
    };
    onMounted(() => {
      window.addEventListener('scroll', handleScroll);
    });
    onBeforeUnmount(() => {
      window.removeEventListener('scroll', handleScroll);
    });
    return {};
  }
}

在onMounted中添加了滚动事件监听器，在onBeforeUnmount中移除了该监听器，确保在组件销毁时不会遗留无效的事件监听器,避免内存泄漏。

Vue3 生命周期在父子组件中的执行顺序是怎样的？

挂载阶段：父组件的beforeCreate -> 父组件的created -> 父组件的beforeMount -> 子组件的beforeCreate -> 子组件的created -> 子组件的beforeMount -> 子组件的mounted -> 父组件的mounted。
更新阶段：父组件的beforeUpdate -> 子组件的beforeUpdate -> 子组件的updated -> 父组件的updated。
卸载阶段：父组件的beforeUnmount -> 子组件的beforeUnmount -> 子组件的unmounted -> 父组件的unmounted。

理解父子组件生命周期的执行顺序对于调试和编写复杂组件结构的应用程序非常重要，在父组件的beforeMount阶段，可以对子组件传递的数据进行最后的处理，而在子组件的mounted阶段,可以基于父组件传递的数据进行进一步的DOM操作或初始化。

如何在 Vue3 中结合生命周期钩子函数和依赖注入（provide/inject）？

依赖注入在Vue3中仍然是一种在组件树中共享数据的便捷方式，可以在生命周期钩子函数中使用它,父组件提供数据：

import { provide, onCreated } from 'vue';
export default {
  setup() {
    const sharedData = reactive({
      message: 'Hello from parent'
    });
    provide('sharedData', sharedData);
    onCreated(() => {
      console.log('Parent component created with shared data');
    });
    return {};
  }
}

子组件注入数据：

import { inject, onCreated } from 'vue';
export default {
  setup() {
    const sharedData = inject('sharedData');
    onCreated(() => {
      if (sharedData) {
        console.log('Sub - component received shared data:', sharedData.message);
      }
    });
    return {};
  }
}

在父组件的setup函数中，通过provide提供了sharedData，并在onCreated钩子函数中打印日志，子组件通过inject获取sharedData，同样在onCreated钩子函数中进行数据的处理和日志打印，这样可以在组件的生命周期过程中,有效地共享和使用依赖注入的数据。

Vue3 生命周期钩子函数对性能优化有什么作用？

在beforeUpdate和updated钩子函数中，可以对数据变化和DOM更新进行精细控制，避免不必要的渲染，如果某个数据变化并不影响DOM的显示，只是用于内部逻辑计算，可以在beforeUpdate中判断，如果不需要更新DOM,则阻止更新。

import { onBeforeUpdate } from 'vue';
export default {
  setup() {
    let counter = ref(0);
    onBeforeUpdate(() => {
      // 假设只有当counter是偶数时才更新DOM
      if (counter.value % 2 === 0) {
        return;
      }
    });
    return {
      counter
    };
  }
}

在beforeUnmount钩子函数中，及时清理定时器、事件监听器等资源，可以避免内存泄漏，提高应用程序的性能，在一个轮询数据的组件中,在组件销毁时取消定时器：

import { onBeforeUnmount, onMounted } from 'vue';
export default {
  setup() {
    let timer;
    onMounted(() => {
      timer = setInterval(() => {
        console.log('Polling data...');
      }, 1000);
    });
    onBeforeUnmount(() => {
      clearInterval(timer);
    });
    return {};
  }
}

通过合理使用Vue3的生命周期钩子函数，可以有效地优化组件的性能,提升应用程序的整体表现。

如何在 Vue3 中使用异步生命周期钩子函数？

Vue3的生命周期钩子函数本身并不限制为异步函数，在created钩子函数中进行异步数据获取：

import { onCreated } from 'vue';
import axios from 'axios';
export default {
  setup() {
    let data = reactive({
      user: null
    });
    onCreated(async () => {
      try {
        const response = await axios.get('/api/user');
        data.user = response.data;
      } catch (error) {
        console.error('Error fetching user data:', error);
      }
    });
    return {
      data
    };
  }
}

这里onCreated钩子函数内部使用了async/await来处理异步操作，在获取到数据后更新响应式数据data.user，同样，在mounted、beforeUpdate等其他生命周期钩子函数中也可以使用异步操作，以满足不同的业务需求，比如在mounted中异步加载第三方脚本等。

Vue3 生命周期钩子函数与 computed 和 watch 的关系是怎样的？

computed：计算属性是基于它们的响应式依赖进行缓存的，当依赖的数据发生变化时，计算属性会重新计算，生命周期钩子函数与计算属性没有直接的触发关系，但在生命周期钩子函数中可以访问计算属性，在mounted钩子函数中可以根据计算属性的值进行DOM操作：
```
<template>
<div>{{ computedValue }}</div>
</template>
```

``` - **watch**：`watch`用于监听响应式数据的变化，并执行相应的回调函数，生命周期钩子函数与`watch`也没有直接的触发关系，但可以结合使用，在`created`钩子函数中设置`watch`来监听数据变化： ```javascript import { onCreated, ref, watch } from 'vue';

export default { setup() { let message = ref('Initial message');

onCreated(() => {
  watch(message, (newValue, oldValue) => {
    console.log('Message changed from', oldValue, 'to', newValue);
  });
});
return {
  message
};


这里在`created`钩子函数中设置了对`message`的监听，当`message`的值发生变化时，会执行`watch`的回调函数，通过这种方式，可以在组件的生命周期过程中，利用`watch`对数据变化进行更细致的处理。
通过对以上问题的解答，相信你对Vue3的生命周期有了更深入的理解，能够在实际开发中更好地运用这些知识来构建高效、稳定的Vue应用程序。

赏您的支持是我们创作的动力！