Vue3 的新特性（三） —— LifeCycle Hooks

目录

• Vue3 的新特性
• Vue3 的新特性(二) —— Composition-Api
• Vue3 的新特性(三) —— 生命周期
• Vue3 的新特性(四) —— 虚拟DOM的底层原理

前言

在 Vue3 中的生命周期函数，与 Vue2 中略有不同

生命周期函数的用法

Vue3 中，要在 setup() 函数中使用生命周期来完成需求

当你需要使用生命周期时，直接导入 onxxx 一族的生命周期钩子：

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  },
}

这些生命周期钩子只能在 setup() 内部同步使用，因为他们依赖正在调用 setup() 的组件实例。

看到这里，想必你的感触一定很深了——你会发现 Vue3 与 react17 的发展方向开始相似，所以说，好好学 JS 吧~

与 2.x 版本相对应的生命周期钩子

Vue2.x 的生命周期	Vue3.x 的生命周期
beforeCreate	使用 setup()
created	使用 setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

新增的钩子函数

除了与 Vue2.x 等效的生命周期之外，composition-api 还新增了以下生命周期钩子用作调试：

• onRenderTracked
• onRenderTriggered

两个钩子函数都接收一个 DebuggerEvent :

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}