Vue进阶 | Vue3的生命周期

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第26天，点击查看活动详情

在 Vue 中，每个组件都是独立的，都有属于它自己的生命周期，Vue2 与 Vue3 生命周期对比能帮助我们更好地理解生命周期

Vue2 与 Vue3 生命周期对比

在 Vue 中生命周期大体可以分为四个大类：

• 创建 — 组件创建时执行
• 挂载 — DOM 被挂载时执行
• 更新 — 数据被修改时执行
• 销毁 — 元素被销毁之前运行

下图很清晰的对比出了 Vue2 和 Vue3 中生命周期的不同：

注：

• 如果项目中使用的是 选项式 API 依旧可以使用原来的 Vue2 形式来使用周期钩子
• 如果项目中使用的是 组合式 API 需要使用 Vue3 中提供的生命周期声明方式。

组合式API

关于组合式 API，前面有介绍过： Vue进阶 | Vue3新特性之组合式API（一）

在 组合式 API 的实现方式中，原本生命周期中的 beforecate 和 created 被 setup 所替代，setup() 会在所有选项式 API 钩子之前调用。

组合式API中，无论是 setup 方法，还是setup语法糖（ Vue进阶 | Vue3 setup语法糖 中有介绍 ）都适用。

Vue3 生命周期

1. setup()

   • 创建组件之前，也就是在 beforeCreate 和 created 之前执行，此时创建的是data和method
   • 这时候生命的数据不属于响应式，需要在使用 ref 或 reactice

2. onBeforeMount()

   • 组件挂载之前执行的函数

3. onMounted()

   • 组件挂载完成之后执行的函数

4. onBeforeUpdate()

   • 组件更新之前执行的函数

5. onUpdated()

   • 组件更新完成之后执行的函数

6. omBeforeUnmount()

   • 组件卸载之前执行，Vue2 中叫做 beforeDestory

7. onUnmounted()

   • 组件卸载完成之后执行，Vue2 中叫做 destoryed

8. onActivated

   • 被 keep-alive 缓存的组件激活时调用

9. onDeactivated

   • 被 keep-alive 缓存的组件停用时调用

10. onErrorCaptured

    • 捕获到一个来自子孙组件的错误时调用， Vue2 中叫做 errorCaptured

11. 其它：

    仅在开发模式下可用：且在服务器端渲染期间不会被调用

    • onRenderTracked()
      • 追踪到响应式依赖时调用
    • onRenderTriggered()
      • 响应式依赖的变更时调用

    组件实例在服务器上被渲染之前调用：

    • onServerPrefetch()

使用

Vue3 组合 API 形式：

import { ref, onMounted } from 'vue'
 
export default {
    setup() { 
         const msg = ref('俺是一句话')
         onMounted(() => {
           console.log(msg.value)
         })
         return { msg }
    }
} 

选项式 API ：

import { ref, onMounted } from 'vue'
 
export default {
    setup() { 
         const msg = ref('俺是一句话')
         
         return { msg }
    },
    mounted() {
     console.log(this.$el)
    }
}