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

目录
文章目录隐藏
  1. 对新旧钩子函数的使用原则
  2. onRenderTracked 状态跟踪
  3. 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的使用吧,这个也有了很大的变化。

「点点赞赏,手留余香」

12

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 07. vue中onRenderTracked()和 onRenderTriggered()钩子函数的使用

发表回复