Vue2 与 Vue3 生命周期变化

2022-05-27 本文已影响0人 lio_zero

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

如果我的内容帮助到了您，欢迎点个 Star 🎉🎉🎉 鼓励鼓励 :) ~~

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

Vue2 Options API 中的生命周期钩子

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

Vue2 实例的生命周期

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

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

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

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

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

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

以下是来自 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!')
    })
  }
}

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