vue3第4课：onRenderTracked()和 onRenderTriggered()钩子函数的使用

onRenderTracked() 状态跟踪

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直译过来是状态触发，它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来。
使用它同样要先用import进行引入

<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>

但我们点击+1后，查看浏览器控制台，可以看到打印出 它不会跟踪每一个值，而是给你变化值的信息，并且新值newValue和旧值oldValue都会给你明确的展示出来。主要的属性介绍

1. key 那边变量发生了变化
2. newValue 更新后变量的值
3. oldValue 更新前变量的值
4. target 目前页面中的响应变量和函数

总结： 通过这些你能很好的对代码进行调试。这些调试用的钩子函数，如果你能正确合理的使用，是真的可以快速解决问题的。