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()钩子函数的使用