生命周期

对于生命周期的理解可以理解为一个组件从创建到销毁的全过程，也有人俗称是一个组件从出生到死亡,从摇篮到坟墓（Cradle-to-Grave）的过程

Vue 2.x 的生命周期

生命周期

常见的生命周期钩子函数可以分数为四个阶段（对应8个钩子函数）以及两个特殊阶段（组件的激活和停用2个钩子函数activated和deactivated）以及1个错误处理钩子函数（errorCaptured）

生命周期	描述
beforeCreate	组件实例被创建之初
created	组件实例已经完全创建
beforeMount	组件挂载之前
mounted	组件挂载到实例上去之后
beforeUpdate	组件数据发生变化，更新之前
updated	组件数据更新之后
beforeDestroy	组件实例销毁之前
destroyed	组件实例销毁之后
activated	keep-alive 缓存的组件激活时
deactivated	keep-alive 缓存的组件停用时
errorCaptured	捕获一个来自子孙组件的错误时

export default {
  data() {
    return { count: 0 };
  },
  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() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
}

具体分析

阶段	描述
beforeCreate	初始化 Vue 实例，开始数据观测。
created	完成数据观测，属性与方法的运算， watch 和事件回调的配置。 可调用 methods 中的方法，访问和修改 data 数据。此时 vm.$el 并未创建。
created -> beforeMount	判断是否存在 el 选项，若不存在则停止编译，直到调用 vm.$mount(el) 才会继续编译。 优先级：render > template > outerHTML。此时获取的是挂载 DOM 的元素。
beforeMount	在此阶段可以获取到 vm.el，但 vm.el 并未挂载到 el 选项对应的 DOM 元素上。
beforeMount -> mounted	此阶段 vm.el 已完成挂载，vm.$el 生成的 DOM 替换了 el 选项所对应的 DOM。
mounted	vm.el 已完成 DOM 的挂载与渲染，打印 vm.$el 可以看到挂载点已被新的 DOM 替换。
beforeUpdate	更新的数据必须是被渲染在模板上的（el、template、render 之一）。此时 view 层还未更新。若在 beforeUpdate 中修改数据，不会再次触发更新方法。
updated	完成 view 层的更新。若在 updated 中修改数据，会再次触发更新方法（beforeUpdate、updated）。
beforeDestroy	实例被销毁前调用，实例的属性与方法仍可访问。
destroyed	完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。并不能清除 DOM，仅销毁实例。

使用场景分析

生命周期	描述
beforeCreate	执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created	组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	未执行渲染、更新，dom未创建
mounted	初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate	更新前，可用于获取更新前各种状态
updated	更新后，所有状态已是最新
beforeDestroy	销毁前，可用于一些定时器或订阅的取消
destroyed	组件已销毁，作用同上

数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的，两者的相同点：都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。

Vue3.x的生命周期

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount');
    });
    onMounted(() => {
      console.log('onMounted');
    });
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate');
    });
    onUpdated(() => {
      console.log('onUpdated');
    });
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount');
    });
    onUnmounted(() => {
      console.log('onUnmounted');
    });
  }
}

生命周期钩子	作用	Vue 做了什么	常见用途
beforeCreate	在 Vue 实例创建之前调用	尚未初始化数据、事件、data、computed 等	不常用，通常在这里不能访问任何数据或事件
created	Vue 实例创建并初始化后调用，数据已初始化	初始化响应式数据，设置事件监听器，computed 和 watch 设置	初始化数据、执行异步操作或设置 API 调用等任务
beforeMount	在 mounted 钩子之前调用，模板已编译但尚未挂载到 DOM	Vue 即将挂载组件到 DOM，但尚未执行任何 DOM 更新	做挂载前的准备工作，如修改 DOM 或计算初始值
mounted	在组件挂载到 DOM 后调用	视图已渲染，mounted 钩子执行	适合操作 DOM，如获取元素、添加事件监听器、发起异步请求等
beforeUpdate	数据变化后，DOM 更新之前调用	数据变化，但视图尚未更新	执行在数据变化前的准备工作，如记录变化前的状态
updated	数据变化并导致 DOM 更新后调用	视图已更新，updated 钩子执行	操作更新后的 DOM，或与外部库进行交互，如更新图表等
beforeUnmount	组件销毁之前调用	组件即将销毁，但尚未从 DOM 中移除	清理任务，如取消订阅、移除事件监听器等
unmounted	组件销毁后调用，DOM 和子组件已被销毁	完全销毁组件，移除事件监听器，清理资源	销毁组件时的清理操作，如清除定时器、取消 HTTP 请求等

Vue3特有生命周期钩子（Composition API）

生命周期钩子	作用	Vue 做了什么	常见用途
setup()	Vue 3 新增的生命周期钩子，位于实例创建之前执行	初始化响应式数据 (ref 和 reactive)，返回 data、computed、methods 等供模板使用	设置组件的响应式数据、方法、生命周期钩子、组合式逻辑等
onBeforeMount	在组件挂载之前调用，类似于 beforeMount	组件挂载前调用	在 setup 中使用，可以替代 beforeMount
onMounted	在组件挂载后调用，类似于 mounted	组件挂载完成后调用	在 setup 中使用，可以替代 mounted
onBeforeUpdate	数据更新前调用，类似于 beforeUpdate	数据变化前调用	在 setup 中使用，可以替代 beforeUpdate
onUpdated	数据更新后调用，类似于 updated	数据更新后调用	在 setup 中使用，可以替代 updated
onBeforeUnmount	在组件销毁前调用，类似于 beforeDestroy	组件即将销毁前调用	在 setup 中使用，可以替代 beforeDestroy
onUnmounted	在组件销毁后调用，类似于 destroyed	组件销毁后调用	在 setup 中使用，可以替代 destroyed