个人学习记录之vue3生命周期

组合式API生命周期钩子：

按照执行顺序排序

1. onBeforeMount()
2. onMounted()
3. onBeforeUpdate()
4. onUpdated()
5. onBeforeUnmount()
6. onUnmounted()
7. onActivated()
8. onDeactivated()

详细介绍：

onBeforeMount()和onMounted()使用方法：

    onBeforeMount()和onMounted()钩子中一般用于调用异步函数，手动挂载CLASS等操作

onMounted(() => {
  console.log('自己的代码');
})

onBeforeMount(() => {
  console.log('自己的代码');
})

onBeforeUpdate()和onUpdated()使用方法：

onBeforeUpdate()和onUpdated()钩子中一般用于数据更新后，但是dom更新前和dom更新后调用如果在dom变化后需要一些操作可以使用onUpdated()

onBeforeUpdate(() => {
  console.log('自己的代码');
})

onUpdated(() => {
  console.log('自己的代码');
})

onBeforeUnmount()和onUnmounted()

onBeforeUnmount()和onUnmounted()钩子中一般用于卸载组件时做些自己的操作 比如 清除定时器，DOM 事件监听器

onBeforeUnmount(() => {
  console.log('自己的代码');
})

onUnmounted(() => {
  console.log('自己的代码');
})

7. onActivated()和onDeactivated()

onActivated()和onDeactivated()钩子中一般用于 组件中 当组件被 包裹当组件被插入到 DOM 中时调用。

onActivated(() => {
  console.log('自己的代码');
})

onDeactivated(() => {
  console.log('自己的代码');
})

选项式API生命周期钩子：

按照执行顺序排序

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeUnmount
8. unmounted

选项式生命周期钩子使用方式和VUE2基本一致