生命周期

export const enum LifecycleHooks {
  BEFORE_CREATE = 'bc', // 创建之前
  CREATED = 'c', // 创建
  BEFORE_MOUNT = 'bm', // 挂载之前
  MOUNTED = 'm', // 挂载
  BEFORE_UPDATE = 'bu', // 更新之前
  UPDATED = 'u', // 更新
  BEFORE_UNMOUNT = 'bum', // 卸载之前
  UNMOUNTED = 'um', // 卸载之后
  DEACTIVATED = 'da', // 被 keep-alive 缓存的组件停用时调用。
  ACTIVATED = 'a', // 被 keep-alive 缓存的组件激活时调用。
  RENDER_TRIGGERED = 'rtg', // 依赖被收集时调用
  RENDER_TRACKED = 'rtc', // 依赖被触发时调用
  ERROR_CAPTURED = 'ec', // 错误捕获
  SERVER_PREFETCH = 'sp'
}

export default {
  methods: {
    created() {
      // do something
    }
  }
}

import { onMounted } from 'vue';
​
export default {
  setup() {
    onMounted(() => {
      // do something
    });
  }
}

if (next) {
    next.el = vnode.el
    // 在组件更新前，先更新一些数据
    updateComponentPreRender(instance, next, optimized)
} else {
    next = vnode
}

const updateComponentPreRender = (
    instance: ComponentInternalInstance,
    nextVNode: VNode,
    optimized: boolean
  ) => {
    nextVNode.component = instance
    const prevProps = instance.vnode.props
    instance.vnode = nextVNode
    instance.next = null
    // 更新props
    updateProps(instance, nextVNode.props, prevProps, optimized)
    // 更新slots
    updateSlots(instance, nextVNode.children, optimized)
  // ...
  }

// 生命周期的创建
export const onBeforeMount = createHook(LifecycleHooks.BEFORE_MOUNT)
export const onMounted = createHook(LifecycleHooks.MOUNTED)
export const onBeforeUpdate = createHook(LifecycleHooks.BEFORE_UPDATE)
export const onUpdated = createHook(LifecycleHooks.UPDATED)
export const onBeforeUnmount = createHook(LifecycleHooks.BEFORE_UNMOUNT)
export const onUnmounted = createHook(LifecycleHooks.UNMOUNTED)
export const onServerPrefetch = createHook(LifecycleHooks.SERVER_PREFETCH)

// packages/runtime-core/src/apiLifecycle.ts
export const createHook = (lifecycle) => (hook, target = currentInstance) => injectHook(lifecycle, hook, target)

export function injectHook(
  type: LifecycleHooks, // 我们调用createHook传入的值
  hook: Function & { __weh?: Function }, // hook执行函数
  target: ComponentInternalInstance | null = currentInstance, // 目标实例
  prepend: boolean = false
): Function | undefined {
  if (target) {
    // 把各个生命周期的Hooks函数挂载到组件实例上，并且是一个数组，因为可能你会多次调用同一个组件的同一个生命周期函数
    const hooks = target[type] || (target[type] = [])
    const wrappedHook =
      hook.__weh ||
      (hook.__weh = (...args: unknown[]) => {
        if (target.isUnmounted) { // 组件卸载了就不执行
          return
        }
        pauseTracking() // 生命周期函数的执行不需要收集响应式依赖，我们只需要在render渲染的时候收集就好了。因为我们依赖的触发响应式变化最后是要修改dom的
        setCurrentInstance(target) // 设置当前实例
        const res = callWithAsyncErrorHandling(hook, target, type, args) // 运行当前hooks
        unsetCurrentInstance()
        resetTracking() // 恢复依赖收集
        return res
      })
    if (prepend) {
      hooks.unshift(wrappedHook) // 把生命周期的包装函数绑定到组件实例对应的hooks上
    } else {
      hooks.push(wrappedHook)
    }
    return wrappedHook
  }
}

// 组合 API
<script>
import { onMounted } from 'vue'
​
export default {
   setup () {
     onMounted(() => {
       console.log('mounted in the composition api!')
     })
   }
}
</script>

// 选项 API
<script>    
   export default {        
      mounted() {            
         console.log('mounted!')        
      },        
      updated() {            
         console.log('updated!')        
      }    
   }
</script>

export function applyOptions() { // 省略参数
  // 省略其他代码
  registerLifecycleHook(onBeforeMount, beforeMount) // 注册生命周期钩子函数
  registerLifecycleHook(onMounted, mounted)
  registerLifecycleHook(onBeforeUpdate, beforeUpdate)
  registerLifecycleHook(onUpdated, updated)
  registerLifecycleHook(onActivated, activated)
  registerLifecycleHook(onDeactivated, deactivated)
  registerLifecycleHook(onErrorCaptured, errorCaptured)
  registerLifecycleHook(onRenderTracked, renderTracked)
  registerLifecycleHook(onRenderTriggered, renderTriggered)
  registerLifecycleHook(onBeforeUnmount, beforeUnmount)
  registerLifecycleHook(onUnmounted, unmounted)Ï
  registerLifecycleHook(onServerPrefetch, serverPrefetch)
  // 省略其他代码
}

function registerLifecycleHook(
    register: Function,
    hook?: Function | Function[]
  ) {
    if (isArray(hook)) {
      hook.forEach(_hook => register(_hook.bind(publicThis)))
    } else if (hook) {
      register(hook.bind(publicThis))
    }
  }

export function applyOptions() { // 省略参数
  // 省略其他代码
  if (options.beforeCreate) { // 调用beforeCreate
    callHook(options.beforeCreate, instance, LifecycleHooks.BEFORE_CREATE)
  }
  // 省略其他代码
  if (created) { // created操作
    callHook(created, instance, LifecycleHooks.CREATED)
  }
  // 省略其他代码
}

function callHook(
  hook: Function,
  instance: ComponentInternalInstance,
  type: LifecycleHooks
) {
  callWithAsyncErrorHandling(
    isArray(hook)
      ? hook.map(h => h.bind(instance.proxy!)) // 遍历执行当前的hooks
      : hook.bind(instance.proxy!), // 在这里绑定上instance.proxy的实例，这样可以通过this访问到data，props这些属性的值了
    instance,
    type
  )
}

const componentUpdateFn = () => { // 省略参数
  if (!instance.isMounted) { // 初次挂载
    const { bm, m, parent } = instance
    if (bm) { // 触发beforemount钩子函数
      invokeArrayFns(bm) // invokeArrayFns在执行beforeMount的时候包裹一层try catch,因为beforeMount是用户写的代码可能出    现错误,为了保证程序能继续运行下去所以需要一层保护机制。
    }
​
    //省略其他代码
    const subTree = (instance.subTree = renderComponentRoot(instance)) // 递归调用子组件获取最终的vnode 通过执行模板编译后生成的render函数，再进行相应的处理，得到最终的vnode。
​
    // 子树patch
​
    // mounted hook // 触发mounted钩子函数,放在后置队列执行，因为mounted要在组件渲染之后执行
    if (m) {
      queuePostRenderEffect(m, parentSuspense)
    }
  } else {
    // 更新逻辑
  }
}

const componentUpdateFn = () => { // 省略参数
  if (!instance.isMounted) { // 初次挂载
    // 挂载逻辑
  } else {
    // 更新逻辑
    let { next, bu, u, parent, vnode } = instance
     //省略其他代码
    // beforeUpdate hook // 触发beforeUpdate钩子函数
    if (bu) {
      invokeArrayFns(bu)
    }
    const nextTree = renderComponentRoot(instance) // 重新渲染子树，调用一下render函数，生成新的vnode
    // 子树patch
    
    // updated hook // 触发updated钩子函数,放在后置队列执行
    if (u) {
      queuePostRenderEffect(u, parentSuspense)
    }
  }
}

const unmountComponent = (
    instance: ComponentInternalInstance,
    parentSuspense: SuspenseBoundary | null,
    doRemove?: boolean
  ) => {
    //省略其他代码
    const { bum, scope, update, subTree, um } = instance
    // beforeUnmount hook // 调用 beforeUnmount狗子
    if (bum) {
      invokeArrayFns(bum)
    }
    // 组件卸载
    // unmounted hook // 调用unmounted钩子
    if (um) {
      queuePostRenderEffect(um, parentSuspense)
    }
  }

beforeDestroy() {
  clearInterval(this.timer);
}

async fetchData() {
  const data = await fetch('/api/data');
  if (!this._isDestroyed) this.data = data;
}

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });

beforeDestroy() {
  controller.abort();
}

updated() {
  if (this.previousValue !== this.currentValue) {
    this.recalculate();
  }
}

import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

function useFetchData() {
  onMounted(() => fetchData());
}