生命周期：各个生命周期的执行时机和应用场景是怎样的？

const onBeforeMount = createHook('bm' /* BEFORE_MOUNT */)
const onMounted = createHook('m' /* MOUNTED */)
const onBeforeUpdate = createHook('bu' /* BEFORE_UPDATE */)
const onUpdated = createHook('u' /* UPDATED */)
const onBeforeUnmount = createHook('bum' /* BEFORE_UNMOUNT */)
const onUnmounted = createHook('um' /* UNMOUNTED */)
const onRenderTriggered = createHook('rtg' /* RENDER_TRIGGERED */)
const onRenderTracked = createHook('rtc' /* RENDER_TRACKED */)
const onErrorCaptured = (hook, target = currentInstance) => {
  injectHook('ec' /* ERROR_CAPTURED */, hook, target)
}

const createHook = function(lifecycle)  {
  return function (hook, target = currentInstance) {
    injectHook(lifecycle, hook, target)
  }
}

const onBeforeMount = function(hook,target = currentInstance) {
  injectHook('bm', hook, target)
}
const onMounted = function(hook,target = currentInstance) {
  injectHook('m', hook, target)
}

function injectHook(type, hook, target = currentInstance, prepend = false) {
  const hooks = target[type] || (target[type] = [])
  // 封装 hook 钩子函数并缓存
  const wrappedHook = hook.__weh ||
    (hook.__weh = (...args) => {
      if (target.isUnmounted) {
        return
      }
      // 停止依赖收集
      pauseTracking()
      // 设置 target 为当前运行的组件实例
      setCurrentInstance(target)
      // 执行钩子函数
      const res = callWithAsyncErrorHandling(hook, target, type, args)
      setCurrentInstance(null)
      // 恢复依赖收集
      resetTracking()
      return res
    })
  if (prepend) {
    hooks.unshift(wrappedHook)
  }
  else {
    hooks.push(wrappedHook)
  }
}

const unmountComponent = (instance, parentSuspense, doRemove) => {
  const { bum, effects, update, subTree, um } = instance
  // 执行 beforeUnmount 钩子函数
  if (bum) {
    invokeArrayFns(bum)
  }
  // 清理组件引用的 effects 副作用函数
  if (effects) {
    for (let i = 0; i < effects.length; i++) {
      stop(effects[i])
    }
  }
  // 如果一个异步组件在加载前就销毁了，则不会注册副作用渲染函数
  if (update) {
    stop(update)
    // 调用 unmount 销毁子树
    unmount(subTree, instance, parentSuspense, doRemove)
  }
  // 执行 unmounted 钩子函数
  if (um) {
    queuePostRenderEffect(um, parentSuspense)
  }
}

<template>
  <div>
    <div>
      <p>{{count}}</p>
    </div>
  </div>
</template>
<script>
  import { ref, onBeforeUnmount } from 'vue'
  export default {
    setup () {
      const count = ref(0)
      const timer = setInterval(() => {
        console.log(count.value++)
      }, 1000)
      onBeforeUnmount(() => {
        clearInterval(timer)
      })
      return {
        count
      }
    }
  }
</script>

function handleError(err, instance, type) {
  const contextVNode = instance ? instance.vnode : null
  if (instance) {
    let cur = instance.parent
    // 为了兼容 2.x 版本，暴露组件实例给钩子函数
    const exposedInstance = instance.proxy
    // 获取错误信息
    const errorInfo = (process.env.NODE_ENV !== 'production') ? ErrorTypeStrings[type] : type
    // 尝试向上查找所有父组件，执行 errorCaptured 钩子函数
    while (cur) {
      const errorCapturedHooks = cur.ec
      if (errorCapturedHooks) {
        for (let i = 0; i < errorCapturedHooks.length; i++) {
          // 如果执行的 errorCaptured 钩子函数并返回 true，则停止向上查找。、
          if (errorCapturedHooks[i](err, exposedInstance, errorInfo)) {
            return
          }
        }
      }
      cur = cur.parent
    }
  }
  // 往控制台输出未处理的错误
  logError(err, type, contextVNode)
}

instance.update = effect(function componentEffect() {
// 创建或者更组件
}, createDevEffectOptions(instance))
function createDevEffectOptions(instance) {
  return {
    scheduler: queueJob,
    onTrack: instance.rtc ? e => invokeArrayFns(instance.rtc, e) : void 0,
    onTrigger: instance.rtg ? e => invokeArrayFns(instance.rtg, e) : void 0
  }
}

function track(target, type, key) {
  // 执行一些依赖收集的操作
if (!dep.has(activeEffect)) {
    dep.add(activeEffect)
    activeEffect.deps.push(dep)
    if ((process.env.NODE_ENV !== 'production') && activeEffect.options.onTrack) {
      // 执行 onTrack 函数
      activeEffect.options.onTrack({
        effect: activeEffect,
        target,
        type,
        key
      })
    }
  }
}

function trigger (target, type, key, newValue) {
  // 添加要运行的 effects 集合
  const run = (effect) => {
    if ((process.env.NODE_ENV !== 'production') && effect.options.onTrigger) {
        // 执行 onTrigger
      effect.options.onTrigger({
        effect,
        target,
        key,
        type,
        newValue,
        oldValue,
        oldTarget
      })
    }
    if (effect.options.scheduler) {
      effect.options.scheduler(effect)
    }
    else {
      effect()
    }
  }
  // 遍历执行 effects
  effects.forEach(run)
}

<template>
  <div>
    <div>
      <p>{{count}}</p>
      <button @click="increase">Increase</button>
    </div>
  </div>
</template>
<script>
  import { ref, onRenderTracked, onRenderTriggered } from 'vue'
  export default {
    setup () {
      const count = ref(0)
      function increase () {
        count.value++
      }
      onRenderTracked((e) => {
        console.log(e)
        debugger
      })
      onRenderTriggered((e) => {
        console.log(e)
        debugger
      })
      return {
        count,
        increase
      }
    }
  }
</script>