目录
前言
在 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 的生命周期 |
|---|---|
| 使用 setup() | |
| 使用 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
// 检查哪个依赖性导致组件重新渲染
},
}
