Vue3生命周期

Vue3生命周期

官方文档：https://cn.vuejs.org/api/composition-api-lifecycle.html

组件加载

setup

组件创建前触发，等同于beforeCreate和created，没有this

onBeforeMount

组件挂载前触发，等同于beforeMount，

onMounted

组件挂载后触发，dom加载完毕。等同于Mounted

组件更新

onBeforeUpdate

组件更新前调用，等同于beforeUpdate

onUpdated

组件更新后调用，等同于updated

组件卸载

onBeforeUnmount

组件卸载前调用，等同于beforeDetory

onUnmounted

组件卸载后调用，等同于detoryed

Keep-alive

onActivated

使用keep-alive组件缓存时，进入页面时调用，等同于activated

onDeactivated

使用keep-alive组件缓存时，离开页面时调用，等同于deactivated

捕获子组件错误

onErrorCaptured

onErrorCaptured生命周期是用来捕获子组件中的错误，不是当前组件中的错误。

如果不使用这个生命周期的话子组件报错的时候浏览器里会直接报错，使用这个生命周期会捕获到错误，浏览器中就不会报错了，错误可以在这个生命周期中处理。

组件调试

onRenderTracked

当有数据在组件模板中使用的时候触发

onRenderTriggered

当有数据在组件模板中修改的时候触发

<script>
import { onRenderTracked, onRenderTriggered, reactive } from 'vue'
export default {
  setup() {
    const obj = reactive({
      name: '高启强'
    })

    // 当数据在模板中使用的时候触发
    onRenderTracked((effect, target, type, key) => {
      debugger
    })
    // 当数据在模板中被改变的时候触发
    onRenderTriggered((effect, target, type, key, newValue, oldValue, oldTarget) => {
      debugger
    })

    function changeName() {
      obj.name = '高启盛'
    }

    return {
      obj,
      changeName
    }
  }
}
</script>

<template>
  <div>{{ obj.name }}</div>
  <button @click='changeName'>改变</button>
</template>