Vue3-组合式API学习之生命周期钩子函数

学习来源

生命周期钩子函数

我们在使用生命周期钩子函数时，可以直接导入onXX的函数来注册生命周期钩子：

<template>
  <div class="home">
    <button @click="addCount">{{count}}</button>
  </div>
</template>
<script lang='ts'>
  import { ref,onMounted,onUpdated,onUnmounted } from 'vue';
  export default {
    setup() {

      const count = ref(0)

      function addCount(){
        count.value++
      }

      // 页面挂载
      onMounted(()=>{
        console.log('mounted,挂载')
      })
      // 数据更新
      onUpdated(()=>{
        console.log('updated,更新')
      })
      // 卸载
      onUnmounted(()=>{
        console.log('unmounted,卸载')
      })

      return {
        count,
        addCount,
      }
    }
  }
</script>

这些生命周期钩子注册函数只能在setup()期间同步使用，因为它们依赖于内部的全局状态来定位当前组件实例（正在调用setup（）的组件实例），不在当前组件下调用这些函数会抛出错误。
组件实例上下文也是在生命周期钩子同步执行期间设置的，因此，在卸载组件时，在生命周期钩子内部同步创建的侦听器和计算状态也将自动删除。

新增的钩子函数：

• onRenderTracked
• onRenderTriggered

两个钩子函数都接收一个DebuggerEvent，与watchEffect参数选项中的onTrack和onTrigger类似

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖性导致组件重新渲染
  },
}