【vue-8】Vue3 Options API 生命周期函数全面解析

在 Vue.js 开发中，理解组件的生命周期是构建健壮应用程序的关键。虽然 Vue3 引入了 Composition API，但 Options API 仍然是许多开发者的首选，特别是对于从 Vue2 迁移的项目或更喜欢基于选项的代码组织的团队。本文将深入探讨 Vue3 中 Options API 的生命周期函数，帮助您掌握组件从创建到销毁的完整过程。

1. 生命周期概览

Vue3 的生命周期与 Vue2 相比有一些变化，主要是为了更好的支持 Composition API 并优化性能。以下是完整的生命周期图示：

setup (Composition API 特有)
|
└── beforeCreate
    └── created
        └── beforeMount
            └── mounted
                ├── beforeUpdate
                │   └── updated
                ├── activated (keep-alive 组件特有)
                │   └── deactivated (keep-alive 组件特有)
                └── beforeUnmount
                    └── unmounted

2. 各生命周期钩子详解

2.1 beforeCreate

触发时机：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

典型用途：

• 执行一些不依赖响应式数据的初始化逻辑
• 设置一些实例属性，这些属性可能在后续的 created 钩子中使用

export default {
  beforeCreate() {
    console.log('beforeCreate: 实例刚创建，数据观测未初始化');
    console.log(this.$data); // undefined
    console.log(this.someData); // undefined
  },
  data() {
    return {
      someData: 'Hello'
    }
  }
}

2.2 created

触发时机：在实例创建完成后被立即调用。在这一步，实例已完成以下配置：

• 数据观测 (data observer)
• 属性和方法的运算
• watch/event 事件回调

典型用途：

• 访问响应式数据
• 发起异步请求获取数据
• 初始化一些需要响应式数据的逻辑

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  created() {
    console.log('created: 实例已创建，数据观测已初始化');
    console.log(this.message); // 'Hello Vue!'
    
    // 发起API请求
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 异步数据获取逻辑
    }
  }
}

2.3 beforeMount

触发时机：在挂载开始之前被调用，相关的 render 函数首次被调用。

典型用途：

• 在组件挂载到DOM之前执行最后的准备工作
• 很少需要在此钩子中进行操作，大多数情况下使用 created 或 mounted 更合适

export default {
  beforeMount() {
    console.log('beforeMount: 模板编译完成，即将挂载到DOM');
    console.log(this.$el); // undefined，尚未挂载
  }
}

2.4 mounted

触发时机：实例被挂载后调用，这时 el 被新创建的 vm.$el 替换。

典型用途：

• 访问或操作DOM元素
• 集成第三方库需要DOM存在的场景
• 执行依赖于DOM的初始化操作

export default {
  mounted() {
    console.log('mounted: 实例已挂载到DOM');
    console.log(this.$el); // 可以访问DOM元素
    
    // 使用第三方图表库
    this.initChart();
  },
  methods: {
    initChart() {
      const ctx = this.$refs.chartCanvas.getContext('2d');
      // 初始化图表...
    }
  }
}

2.5 beforeUpdate

触发时机：数据更新时调用，发生在虚拟 DOM 打补丁之前。

典型用途：

• 在组件更新前访问现有的DOM状态
• 跟踪组件更新前的状态

export default {
  data() {
    return {
      counter: 0
    }
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据即将更新');
    console.log('当前值:', this.$refs.counter.textContent);
  }
}

2.6 updated

触发时机：由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。

典型用途：

• 执行依赖于DOM更新的操作
• 谨慎使用，避免在此钩子中修改状态，可能导致无限更新循环

export default {
  data() {
    return {
      items: []
    }
  },
  updated() {
    console.log('updated: DOM已更新');
    // 在列表更新后滚动到底部
    this.$refs.list.scrollTop = this.$refs.list.scrollHeight;
  }
}

2.7 beforeUnmount (Vue2中的beforeDestroy)

触发时机：实例销毁之前调用。在这一步，实例仍然完全可用。

典型用途：

• 清理定时器
• 取消事件监听
• 清理第三方库的实例

export default {
  data() {
    return {
      timer: null
    }
  },
  created() {
    this.timer = setInterval(() => {
      console.log('Timer tick');
    }, 1000);
  },
  beforeUnmount() {
    console.log('beforeUnmount: 实例即将销毁');
    clearInterval(this.timer);
  }
}

2.8 unmounted (Vue2中的destroyed)

触发时机：实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

典型用途：

• 执行最后的清理工作
• 报告分析数据或日志

export default {
  unmounted() {
    console.log('unmounted: 实例已销毁');
    // 发送日志
    this.sendAnalytics('Component destroyed');
  }
}

2.9 activated 和 deactivated (keep-alive 特有)

触发时机：

• activated：被 keep-alive 缓存的组件激活时调用
• deactivated：被 keep-alive 缓存的组件失活时调用

典型用途：

• 恢复或暂停组件特定的行为
• 获取最新数据（activated）
• 保存组件状态（deactivated）

export default {
  activated() {
    console.log('activated: 组件被激活');
    // 获取最新数据
    this.fetchData();
  },
  deactivated() {
    console.log('deactivated: 组件被缓存');
    // 保存滚动位置
    this.scrollPosition = this.$refs.list.scrollTop;
  }
}

3. Vue2 到 Vue3 的生命周期变化

1. 重命名：

   • beforeDestroy → beforeUnmount
   • destroyed → unmounted

2. 新增：

   • renderTracked 和 renderTriggered（主要用于调试）

3. 行为变化：

   • 生命周期钩子现在都使用异步队列执行，确保一致性

4. 最佳实践

1. 数据获取：通常在 created 钩子中进行异步数据获取，这样可以在组件挂载前尽早开始请求。

2. DOM操作：必须在 mounted 钩子中进行，因为只有这时DOM才存在。

3. 清理工作：在 beforeUnmount 中清理定时器、事件监听器等，防止内存泄漏。

4. 避免在 updated 中修改状态：这可能导致无限更新循环。

5. keep-alive 组件优化：使用 activated 和 deactivated 来管理缓存组件的状态。

6. 代码组织：将相关生命周期逻辑分组注释，提高代码可读性。

export default {
  // 数据相关
  data() { /* ... */ },
  created() { /* 数据初始化 */ },
  
  // DOM相关
  mounted() { /* DOM操作 */ },
  beforeUnmount() { /* 清理DOM相关资源 */ },
  
  // 状态更新相关
  beforeUpdate() { /* 更新前操作 */ },
  updated() { /* 更新后操作 */ },
  
  // keep-alive相关
  activated() { /* 恢复状态 */ },
  deactivated() { /* 保存状态 */ }
}

5. 常见问题解答

Q: created 和 mounted 哪个更适合发起API请求？

A: 通常建议在 created 中发起API请求，这样可以尽早开始数据获取，减少用户等待时间。只有在请求结果直接影响DOM时才需要在 mounted 中发起请求。

Q: 为什么我的 beforeUpdate 钩子没有被触发？

A: beforeUpdate 只在响应式数据变化导致重新渲染时触发。如果您的数据变化不影响模板，或者使用了非响应式数据，钩子不会被调用。

Q: Vue3 中是否可以混用 Options API 和 Composition API 的生命周期？

A: 可以，但不推荐。Composition API 使用 setup() 函数中的生命周期钩子（如 onMounted），而 Options API 使用我们讨论的这些钩子。混用可能导致逻辑分散，降低代码可读性。

6. 结语

理解 Vue3 的 Options API 生命周期钩子是构建高效、可维护 Vue 应用程序的基础。通过合理利用这些钩子，您可以精确控制组件的行为，优化性能，并避免常见问题。随着对生命周期的深入理解，您将能够编写出更加健壮和可预测的 Vue 组件。

记住，虽然生命周期钩子提供了强大的控制能力，但过度使用它们可能导致代码难以维护。始终考虑是否有更简单的方式来实现您的需求，例如使用计算属性或侦听器来代替某些生命周期逻辑。