这两个钩子函数是Vue3.x版本新加的两个钩子函数，官方说是用来调试使用的，但是目前还没有给出具体的调试案例。
对新旧钩子函数的使用原则
Vue 官方的文档里，明确指出了。如果你使用 Vue3，请尽量使用新的生命周期钩子函数，也就是 P06 节写在setup()函数中带on的这些钩子函数。
onRenderTracked 状态跟踪
onRenderTracked直译过来就是状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，它都会跟踪。只要页面有update的情况，它就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在。
使用onRenderTracked同样要使用import进行引入。
import { .... ,onRenderTracked,} from "vue";
引用后就可以在setup()函数中进行引用了。
onRenderTracked((event) => {
console.log("状态跟踪组件----------->");
console.log(event);
});
写完后可以到终端中启动测试服务npm run serve，然后看一下效果，在组件没有更新的时候onRenderTracked是不会执行的，组件更新时，它会跟组里边每个值和方法的变化。
onRenderTriggered 状态触发
onRenderTriggered直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
如果把onRenderTracked比喻成散弹枪，每个值都进行跟踪，那onRenderTriggered就是狙击枪，只精确跟踪发生变化的值，进行针对性调试。
使用它同样要先用import进行引入
import { .... ,onRenderTriggered,} from "vue";
在使用onRenderTriggered前，记得注释相应的onRenderTracked代码，这样看起来会直观很多。 然后把onRenderTriggered()函数，写在setup()函数里边。
onRenderTriggered((event) => {
console.log("状态触发组件--------------->");
console.log(event);
});
对 event 对象属性的详细介绍：
- key 那边变量发生了变化 - newValue 更新后变量的值 - oldValue 更新前变量的值 - target 目前页面中的响应变量和函数
通过这些你能很好的对代码进行调试。这些调试用的钩子函数，如果你能正确合理的使用，是真的可以快速解决问题的。
有的小伙伴看到这里肯定会觉的，这个和watch很像，那下节我们再讲一下watch的使用吧，这个也有了很大的变化。