Vue2中的生命周期

export default {
  created() {
    // ...
  },
  mounted() {
    // ...
  },
  beforeDestory() {
    // ...
  }
}

Vue3中的生命周期

生命周期的实现机制

const onBeforeMount = createHook('bm')
const onMounted = createHook('m')
const onBeforeUpdate = createHook('bu')
const onUpdated = createHook('u')
const onBeforeUnmount = createHook('bum')
const onUnmounted = createHook('um')
const onRenderTriggered = createHook('rtg')
const onRenderTracked = createHook('rtc')
const onErrorCaptured = (hook, target = currentInstance) => {
  injectHook('ec', hook, target)
}

const createHook = function(lifecycle) {
  return function(hook, target = currentInstance) {
    injectHook(lifecycle, 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)
      // 执行勾子函数
       res = callWithAsyncErrorHandling(hook, target, type, args)
       // 重置当前运行的组件实例
       setCurrentInstance(null)
       // 恢复依赖收集
       resetTracking()
       return res
    }
  )
  if (prepend) {
    hooks.unshift(wrappedHook)
  } else {
    hooks.push(wrappedHook)
  }
}

具体的组件生命周期执行时机

Mount相关

const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
  // 创建响应式的副作用渲染函数
  instance.update = effect(function componentEffect() {
    if (!instance.isMounted) {
      // 获取组件实例上通过onBeforeMount勾子函数和onMounted注册的勾子函数
      const { bm, m } = instance;
      // 渲染组件生成子树vnode
      const subTree = (instance.subTree = renderComponentRoot(instance))
      // 执行beforeMount勾子函数
      if (bm) {
        invokeArrayFns(bm)
      }
      // 将子树vnode挂载到container中
      patch(null, subTree, container, anchor, instance, parentSuspense, isSVG)
      // 保留渲染生成的子树根DOM节点
      initialVNode.el = subTree.el
      // 执行mounted钩子函数
      if (m) {
        // 推入到postFlushCbs中
        queuePostRenderEffect(m , parentSuspense)
      }
      instance.isMounted = true
    } else {
      // update component ellipsis...
    }
  }, prodEffectOptions)
}

Update相关

const setupRenderEffect = (instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized) => {
  // ...
  if (xxx) {
    // ...
  } else {
    // 更新组件
    // 获取组件实例上通过onBeforeUpdate勾子函数和onUpdate注册的钩子函数
    let { next, vnode, bu, u } = instance;
    // next表示新的组件vnode
    if (next) {
      // 更新组件vnode节点信息
      updateComponentPreRender(instance, next, optimized)
    } else {
      next = vnode
    }
    // 渲染新的子树vnode
    const nextTree = renderComponentRoot(instance)
    // 缓存旧的子树vnode
    const prevTree = instance.subTree
    // 更新子树vnode
    instance.subTree = nextTree
    // 执行beforeUpdate勾子函数
    if (bu) {
      invokeArrayFns(bu)
    }
    // 组件更新的核心逻辑, 根据新旧子树vnode做patch(这个之后单独拿出来可以再详细讲一下)
    patch(prevTree, nextTree, hostParentNode(prevTree.el), getNextHostNode(prevTree, instance), parentSuspense, isSVG)
    // 缓存更新后的DOM节点
    next.el = nextTree.el
    if (u) {
      // 推入到postFlushCbs中
      queuePostRenderEffect(u, parentSuspense)
    }
  }
  // ...
}

Unmount相关

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

onErrorCaptured

function handleError(err, instance, type) {
  const contextVNode = instance ? instance.vnode : null
  if (instance) {
    let cur = instance.parent
    // 兼容vue2, 暴露组件实例给勾子函数
    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)
}

onRenderTracked和onRenderTriggered

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)
     // 在非生产环境下看当前的effect副作用函数中是否定义了onTrack函数
     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
  effect.forEach(run)
}

声明周期总览