07. vue中onRenderTracked()和 onRenderTriggered()钩子函数的使用

这两个钩子函数是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的使用吧，这个也有了很大的变化。

以上关于07. vue中onRenderTracked()和 onRenderTriggered()钩子函数的使用的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。