Vue2 与 Vue3 生命周期变化

本文已整理到 Github，地址 👉 ​​blog​​。

我希望我的内容可以帮助你。现在我专注于前端领域，但我也将分享我在有限的时间内看到和感受到的东西。

Vue2 Options API 中的生命周期钩子

以下是来自 Vue 2.x 文档中生命周期钩子的​​示意图​​：

Vue2 实例的生命周期

每个主要的 Vue 生命周期事件都分为两个钩子，分别在该事件之前和之后分别调用。

主要的四个事件，八个主要钩子如下：

• 创建 —— 在组件的创建上运行
• 挂载 —— 在挂载 DOM 时运行
• 更新 —— 修改反应性数据后运行
• 销毁 —— 在元素被销毁之前立即运行。

Vue 生命周期钩子使您有机会在 Vue 对组件执行特定操作时运行代码。Vue 为每个组件公开的钩子包括：

• ​​beforeCreate​​
• ​​created​​
• ​​beforeMount​​
• ​​mounted​​
• ​​beforeUpdate​​
• ​​updated​​
• ​​beforeDestroy​​
• ​​destroyed​​

上面的列表是有序的。因此，Vue 总是调在 ​​created​​​ 之前调用 ​​beforeCreate​​​，反过来，Vue 在 ​​beforeMount​​​ 之前调用 ​​created​​。

例如：以下钩子可用于在组件完成初始渲染并创建 DOM 节点后运行代码：

export default {
  mounted() {
    console.log('组件现在已挂载。')
  }
}

Vue3 Composition API 中的生命周期钩子

以下是来自 Vue3 新文档中生命周期钩子的​​示意图​​：

Vue3 实例的生命周期

在 Composition API 中，我们必须先将生命周期钩子导入我们的项目中，然后才能使用它们。这是为了使项目尽可能轻巧。

Composition API 不包括 ​​beforeCreate​​​ 和 ​​created​​​（由 ​​setup​​​ 方法本身代替），我们可以在 ​​setup​​ 方法中访问 9 个生命周期钩子

导入并使用它们：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('mounted in the Composition API!')
    })
  }
}

Vue2 和 Vue3 的生命周期钩子对比

除了上述介绍和一些命名上的变化，具体用法差不多。Vue3 还新增了用于调试和服务端渲染场景的钩子：

• ​​onRenderTracked​​ — 调试钩子，响应式依赖被收集时调用
• ​​onRenderTriggered​​ — 调试钩子，响应式依赖被触发时调用
• ​​onServerPrefetch​​ — 组件实例在服务器上被渲染前调用

详细内容查阅新文档 ​​Composition API: Lifecycle Hooks​​。