vue3的api解读-生命周期钩子

目录

什么是钩子（hook）？

钩子到生命周期的映射

vue的生命周期钩子示例

onRenderTracked/onRenderTriggered

用钩子还是watch？

---

什么是钩子（hook）？

• 钩子是一种消息机制：
  • 例1：GIT的Webhooks
  • 例2：杀毒软件在操作系统中注入的hook
  • 例3：React的Hooks

钩子到生命周期的映射

beforeCreate -> 使用 setup()

created -> 使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeUnmount -> onBeforeUnmount

unmounted -> onUnmounted

errorCaptured -> onErrorCaptured

renderTracked -> onRenderTracked

renderTriggered -> onRenderTriggered

activated -> onActivated

deactivated -> onDeactivated

vue的生命周期钩子示例

import {
  ref,
  defineComponent,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
} from 'vue'
export const LifeExample01 = defineComponent({
  setup() {
    const toggle = ref(true)
    onBeforeUpdate(() => console.log('before update'))
    onUpdated(() => console.log('updated'))
    onErrorCaptured((error) => { // 捕获异常
      console.error('报错走的方法', error)
      // toggle.value = false
    })
    return () => {
      return (
        <div>
          <button onClick={() => toggle.value = !toggle.value}>toggle</button>
          {toggle.value && <A />}
        </div>
      )
    }
  }
})
const A = defineComponent({
  setup() {
    onBeforeMount(() => { console.log('before mount') })
    onMounted(() => { console.log('mounted') })
    onBeforeUnmount(() => { console.log('before unmount') })
    onUnmounted(() => { console.log('unmounted') })
    // throw "333"; // 报错
    return () => <div>A组件</div>
  }
})

onRenderTracked/onRenderTriggered

• 对应track和trigger两个过程触发
• Coding：观察触发时机：初始track一次【依赖追踪】trigger【变更数据通知所有依赖，改值了】
• 思考
  • 它们的作用是什么？track 【get依赖追踪一次】trigger【set通知变更】

import {
  ref,
  defineComponent,
  onRenderTracked,
  onRenderTriggered
} from 'vue'
export const LifeExample02 = defineComponent({
  setup() {
    const c = ref(0)
    onRenderTriggered((x) => {
      console.log('trigger', x) // 多次触发set
    })
    onRenderTracked((x) => {
      console.log('track', x) // get 1次
    })
    return () => {
      return <div onClick={() => c.value++}>{c.value}</div>
    }
  }
})

onActivated/onDeactivated

• 对于keep-alive的组件会触发active和deactive
  • keep-alive是vue的一种组件缓存机制
  • Coding：KeepAlive Switch的示例

import {
  ref,
  defineComponent,
  onUnmounted,
  onActivated,
  onDeactivated,
  KeepAlive
} from 'vue'
export const LifeExample03 = defineComponent({
  setup() {
    const toggle = ref(true)
    return () => {
      return (
        <div>
          <button onClick={() => toggle.value = !toggle.value}>toggle</button>
          <KeepAlive>{toggle.value && <B />}</KeepAlive>
        </div>
      )
    }
  }
})
const B = defineComponent({
  setup() {
    onUnmounted(() => {
      // KeepAlive内的复杂组件会缓存，不走销毁钩子
      console.log('unmounted')
    })
    onActivated(() => {
      console.log('active显示')
    })
    onDeactivated(() => {
      console.log('deactive隐藏')
    })
    return () => <div>B组件</div>
  }
})

用钩子还是watch？

• 初始页面发送请求，用watchEffect还是......onMounted,都可以，都是开始时执行一次
• 定时器是否在组件卸载时候清除？对,写在onUnmounted钩子里
• 什么时候用`beforeUpdated`?大部分时候都不用，