Vue3 生命周期

描述

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

初始化、挂载：

选项式	组合式	描述
setup	setup	Vue3 新增
beforeCreate	-	组件实例对象还未创建 使用场景：通常用于插件开发中执行一些初始化任务
created	-	实例对象创建完成 使用场景：获取数据请求、加载 loading 注意：此时获取不到dom元素，也就是 this.$el 为 undefined
beforeMount	onBeforeMount	挂载DOM（未执行渲染、更新，dom未创建） 使用场景：结束 loading
mounted	onMounted	DOM挂载完毕（可获取访问数据和dom元素） 使用场景：进行 dom 操作

更新：

选项式	组合式	描述
beforeUpdate	onBeforeUpdate	更新前，可用于获取更新前各种状态
updated	onUpdated	更新后，所有状态已是最新

销毁（非兼容 Vue2）：
使用场景：销毁定时器、组件监听、事件监听等等会造成内存泄漏的东西

选项式	组合式	描述
beforeUnmount	onBeforeUnmount	销毁前
unmounted	onUnmounted	组件已销毁

缓存：

选项式	组合式	描述
activated	onActivated	keep-alive 缓存的组件激活。 该钩子在服务器端渲染期间不被调用。
deacticated	onDeactivated	keep-alive 缓存的组件停用。 该钩子在服务器端渲染期间不被调用。

组件调试：

选项式	组合式	描述
renderTrack	onRenderTrack	收集依赖触发的钩子
renderTrigger	onRenderTrigger	修改更新触发的钩子

使用

选项式：

<script lang="ts">
export default {
  beforeCreate() {},
  created() {},

  // 如果存在 <script setup lang="ts"> 语法糖，此处setup钩子函数会报错
  setup() {
    console.log("setup");
  },
};
</script>

组合式：
注意：setup语法糖中没有 beforeCreate、created 钩子函数，且其他钩子函数多了on前缀

<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue";

// 初始化：
console.log("setup");
onBeforeMount(() => {});
onMounted(() => {});

// 更新：
onBeforeUpdate(() => {});
onUpdated(() => {});

// 销毁
onBeforeUnmount(() => {});
onUnmounted(() => {});
</script>