选项-生命周期钩子

版本对比

vue 1.0+	vue 2.0+	vue 3.0+ 选项式API -> 组合式API	描述
init	beforeCreate	beforeCreate -> setup()	组件实例刚被创建，组件属性计算之前，如 data 属性等
created	created	created -> setup()	组件实例创建完成，属性已绑定，但 DOM 还未生成，$el 属性还不存在
beforeCompile	beforeMount	beforeMount -> onBeforeMount	在挂载开始之前被调用：相关的 render 函数首次被调用
compiled	-	-	模板编译/挂载之后（但是不担保 $el 已插入文档）
ready	mounted	mounted -> onMounted	模板编译/挂载之后
-	beforeUpdate	beforeUpdate -> onBeforeUpdate	组件更新之前
-	updated	updated -> onUpdated	组件更新之后
-	activated	activated -> onActivated	被 keep-alive 缓存的组件激活时调用
-	deactivated	deactivated -> onDeactivated	被 keep-alive 缓存的组件失活时调用
attached	-		在 vm.$el 插入 DOM 时调用。
detached	-		在 vm.$el 从 DOM 中删除时调用。
beforeDestroy	beforeDestroy	beforeUnmount -> onBeforeUnmount	实例销毁之前调用。在这一步，实例仍然完全可用
destroyed	destroyed	unmounted -> onUnmounted	实例销毁后调用

export default {
  // 装载阶段
  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");
  },
}

父子组件生命周期调用顺序

创建由外到内

渲染由内到外

1. 先创建父组件js模型
2. 在创建子组件js模型
3. 在渲染子组件
4. 在渲染父组件

父（created）-> 子（created）-> 子（mounted）-> 父（mounted）->

更新由外到内

更新结束由内到外

1. 先更新父组件（触发父组件事件，改变父组件数据）
2. 在更新子组件（子组件有引用你父组件被改变数据）
3. 先更新完子组件
4. 在更新完父组件

父（beforeUpdate）-> 子（beforeUpdate）-> 子（updated）-> 父（updated）->

开始销毁由外到内（由父组件触发） 销毁完成由内到外（由父组件触发）

1. 先准备销毁父组件
2. 在准备销毁子组件
3. 子组件销毁结束
4. 父组件销毁结束

父（beforeDestroy）-> 子（beforeDestroy）-> 子（destroyed）-> 父（destroyed）

ref：
vue生命周期图示中英文版Vue实例生命周期钩子