onRenderTracked() 状态跟踪是什么？
是一个状态跟踪，他会跟踪页面上所有的方法跟变量，也就是对我们return返回的属性和方法进行跟踪
作用
当页面有一个update的时候，会生成一个event对象，通过event对象查看代码/程序的问题所在
演示代码
<template> <div class="life"> {{ num }} <button @click="addNum">加1</button> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs, onRenderTracked, } from "vue"; export default defineComponent({ name: "Life", components: {}, setup() { const data = reactive({ num: 1, addNum: () => { data.num++; }, }); onRenderTracked((event) => { console.log(event); }); const refData = toRefs(data); return { ...refData, }; }, }); </script> <style lang="scss"> .life { margin-top: 40px; } </style>
总结：刷新浏览器后，浏览器打印出就可以看到属性key，对应的就是num这个属性名
onRenderTriggered() 状态触发是什么？
状态触发，他不会跟踪每一个值，而是跟踪发生变化值得信息，并且新值和旧值都会给你展示出来
作用
可以展示变化值的信息，old和new的值
代码演示
<template> <div class="life"> {{ num }} <button @click="addNum">加1</button> </div> </template> <script lang="ts"> import { defineComponent, reactive, toRefs, onRenderTriggered, } from "vue"; export default defineComponent({ name: "Life", components: {}, setup() { const data = reactive({ num: 1, addNum: () => { data.num++; }, }); onRenderTriggered((event) => { console.log(event); }); const refData = toRefs(data); return { ...refData, }; }, }); </script> <style lang="scss"> .life { margin-top: 40px; } </style>
key:那边变量发生了变化
newValue:更新后的变量
oldValue:更新前的变量
target:目前页面中的响应变量或函数
get：依赖收集
set：依赖更新
