| 选项式 API |
Hook inside setup
|
beforeCreate |
Not needed* => setup() |
created |
Not needed* => setup() |
beforeMount |
onBeforeMount |
mounted |
onMounted |
beforeUpdate |
onBeforeUpdate |
updated |
onUpdated |
beforeUnmount |
onBeforeUnmount |
unmounted |
onUnmounted |
errorCaptured |
onErrorCaptured |
renderTracked |
onRenderTracked |
renderTriggered |
onRenderTriggered |
TIP
因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。
对新旧钩子函数的使用原则
Vue 官方的文档里，明确指出了。如果你使用 Vue3，请尽量使用新的生命周期钩子函数，也就是P06节写在setup()函数中带on的这些钩子函数。
onRenderTracked 状态跟踪
跟踪页面上所有响应式变量和方法的状态
import { onRenderTracked,} from "vue"
setup(){
onRenderTracked((event) => {
console.log("状态跟踪组件----------->");
console.log(event);
});
}
// 组件没有更新时, onRenderTracked是不会执行的，
// 组件更新时，它会跟组里边每个值和方法的变化。
onRenderTriggered 状态触发
它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来
import { onRenderTracked,} from "vue"
setup(){
onRenderTracked((event) => {
console.log("状态跟踪组件----------->");
console.log(event);
});
}
- key 那边变量发生了变化
- newValue 更新后变量的值
- oldValue 更新前变量的值
- target 目前页面中的响应变量和函数
