Vue3新增的两个生命周期分析解释【onRenderTracked()状态跟踪和onRenderTriggered() 状态触发】

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：依赖更新