Vue2和Vue3的生命周期

Vue 2生命周期钩子函数：

1. beforeCreate：实例刚在内存中被创建，数据观测和事件还未初始化。
2. created：实例已经创建完成，数据观测和事件已经初始化。
3. beforeMount：在挂载开始之前被调用，模板编译/解析完成，但尚未将HTML渲染到页面上。
4. mounted：实例已经挂载到页面上，此时可以执行DOM操作。
5. beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。
6. updated：虚拟DOM重新渲染和打补丁之后调用。
7. beforeDestroy：实例销毁之前调用，此时实例仍然完全可用。
8. destroyed：实例销毁后调用，清空所有事件监听器和子实例。

Vue 3生命周期钩子函数：

1. beforeCreate：同Vue 2。
2. created：同Vue 2。
3. beforeMount：同Vue 2。
4. mounted：同Vue 2。
5. beforeUpdate：同Vue 2。
6. updated：同Vue 2。
7. beforeUnmount（Vue 3新增）：在卸载之前调用，替代了Vue 2中的beforeDestroy。
8. unmounted（Vue 3新增）：在卸载之后调用，替代了Vue 2中的destroyed。

需要注意的是，Vue 3中引入了beforeUnmount和unmounted来取代Vue 2中的beforeDestroy和destroyed，以更好地反映组件的卸载过程。

Vue 3生命周期钩子函数（setup）：

export default {
  setup() {
    onBeforeMount(() => {
      console.log('实例创建完成，即将挂载')
    })
    onMounted(() => {
      console.log('实例挂载完成')
    })
    onBeforeUpdate(() => {
      console.log('组件dom即将更新')
    })
    onUpdated(() => {
      console.log('组件dom已经更新完毕')
    })
    // 对应vue2 beforeDestroy
    onBeforeUnmount(() => {
      console.log('实例即将解除挂载')
    })
    // 对应vue2 destroyed
    onUnmounted(() => {
      console.log('实例已经解除挂载')
    })
    onErrorCaptured(() => {
      console.log('捕获到一个子孙组件的错误')
    })
    onActivated(() => {
      console.log('被keep-alive缓存的组件激活')
    })
    onDeactivated(() => {
      console.log('被keep-alive缓存的组件停用')
    })
    // 两个新钩子，可以精确地追踪到一个组件发生重渲染的触发时机和完成时机及其原因
    onRenderTracked(() => {
      console.log('跟踪虚拟dom重新渲染时')
    })
    onRenderTriggered(() => {
      console.log('当虚拟dom被触发重新渲染时')
    })
  },
}