【vue高频面试题—生命周期篇】：说一下vue的生命周期 vue2和vue3有什么区别

百罹鸟
77 阅读4分钟

1、Vue 的生命周期（生命周期钩子）

Vue 的生命周期是指从组件创建到销毁的过程，它会触发一系列钩子函数。以下是 Vue 生命周期的阶段及对应钩子函数：

1. 创建阶段

  • beforeCreate

    • 组件实例刚刚被创建，data 和 methods 等还未初始化。
    • 使用场景：初始化非响应式数据。

  • created

    • 实例创建完成，data 和 methods 已可用，但 DOM 未生成。
    • 使用场景：发起 API 请求、初始化数据。

2. 挂载阶段

  • beforeMount

    • 在挂载开始之前被调用，此时模板已编译，但 DOM 未更新。
    • 使用场景：可以在这里做一些加载动画的准备。

  • mounted

    • 组件挂载到 DOM 上后调用，此时 DOM 已更新。
    • 使用场景：操作 DOM 或初始化第三方库。

3. 更新阶段

  • beforeUpdate

    • 数据更新后、DOM 更新前调用。
    • 使用场景：在数据变化时做一些特定逻辑处理。

  • updated

    • DOM 更新后调用。
    • 使用场景：依赖最新 DOM 结构的操作。

4. 销毁阶段

  • beforeDestroy (Vue 3: beforeUnmount)

    • 组件销毁前调用，此时实例仍然完全可用。
    • 使用场景：清理计时器、解绑事件。

  • destroyed (Vue 3: unmounted)

    • 组件销毁后调用，所有绑定和事件处理器都已移除。
    • 使用场景：清理内存。

2、Vue 3 生命周期的改进

  1. 组合式 API 支持

    • Vue 3 引入了 Composition API，可以使用 onXxx 方法注册生命周期钩子，避免钩子函数分散在代码中。
    • setup 函数：Vue3 引入了setup函数，它是组合式 API 的入口。在setup函数中可以访问props和context，并进行数据初始化、计算属性定义、方法定义等操作。setup函数在beforeCreate和created之前执行，实际上替代了这两个钩子函数的部分功能。例如，在setup中可以通过const data = reactive({...})来创建响应式数据，而在 Vue2 中这通常是在data函数中完成。
    • onRenderTracked和onRenderTriggered：这两个钩子用于调试，onRenderTracked在响应式数据被追踪时调用，onRenderTriggered在响应式数据触发组件重新渲染时调用。
    javascript
复制代码
import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });

    onUnmounted(() => {
      console.log('组件已销毁');
    });
  }
};

  2. 更好地支持 TypeScript

    • 生命周期钩子通过组合式 API 注册，代码更加灵活，类型推导更清晰。

你说得对，Vue 3 引入了 Composition API，生命周期钩子在新的写法中确实使用了以 on 开头的命名方式，例如 onMounted、onUnmounted 等。这种写法适用于 setup 函数内，而传统的选项式 API 生命周期钩子依然沿用 Vue 2 的命名。我们可以更清楚地区分这两种写法：

3、 Vue 2 生命周期钩子使用

在选项式 API 中，Vue 2 的生命周期钩子如下（Vue 3 的选项式 API仍然支持）：

javascript
复制代码
export default {
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  },
  updated() {
    console.log('updated');
  },
  beforeDestroy() { // Vue 3 中仍支持，但已改名为 beforeUnmount
    console.log('beforeDestroy');
  },
  destroyed() { // Vue 3 中仍支持，但已改名为 unmounted
    console.log('destroyed');
  },
};

4、 Vue 3 生命周期钩子使用（组合式 API）

在 Composition API 中，生命周期钩子以 on 开头，函数名称更符合逻辑调用的风格：

javascript
复制代码
import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('beforeMount');
    });

    onMounted(() => {
      console.log('mounted');
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });

    onUnmounted(() => {
      console.log('unmounted');
    });
  },
};

5、对比选项式 API 和组合式 API 的生命周期钩子

生命周期阶段Vue 2（选项式 API）Vue 3（选项式 API）Vue 3（组合式 API）
创建前beforeCreatebeforeCreate无直接对应（通常在 setup 中直接处理初始化逻辑）
创建后createdcreated无直接对应（通常在 setup 中直接处理初始化逻辑）
挂载前beforeMountbeforeMountonBeforeMount
挂载后mountedmountedonMounted
更新前beforeUpdatebeforeUpdateonBeforeUpdate
更新后updatedupdatedonUpdated
销毁前beforeDestroybeforeUnmountonBeforeUnmount
销毁后destroyedunmountedonUnmounted

总结：

  • Vue 2 和 Vue 3 的选项式 API 钩子名称基本相同，仅有 beforeDestroy → beforeUnmount 和 destroyed → unmounted 的重命名。
  • Vue 3 的 Composition API 新增了以 on 开头的生命周期钩子方法，与选项式 API 钩子功能相同，写法更灵活，适合复杂的逻辑封装和 TypeScript。
  • Vue3 引入了setup函数，它是组合式 API 的入口。在setup函数中可以访问props和context，并进行数据初始化、计算属性定义、方法定义等操作。setup函数在beforeCreate和created之前执行。
  • 新增了两个调试钩子：onRenderTracked和onRenderTriggered
avatar
文章
阅读
粉丝