组合式 API - 生命周期钩子

选项式 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 目前页面中的响应变量和函数