beforeCreate, created vs setup

beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
errorCaptured -> onErrorCaptured

export function initMixin(Vue: typeof Component) {
  Vue.prototype._init = function (options?: Record<string, any>) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (__DEV__ && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to mark this as a Vue instance without having to do instanceof
    // check
    vm._isVue = true
    // avoid instances from being observed
    vm.__v_skip = true
    // effect scope
    vm._scope = new EffectScope(true /* detached */)
    vm._scope._vm = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options as any)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor as any),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (__DEV__) {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate', undefined, false /* setContext */)
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (__DEV__ && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

callHook(vm, 'beforeCreate', undefined, false /* setContext */)
callHook(vm, 'created')

// merge options
// 可以简单的理解为2种情况
// 1. 根组件合并，你 new Vue的参数，mixin，api 都合并为一个新的 $options
// 2. 子组件合并，把父组件的 event, props 需要传递的东西合并。
if (options && options._isComponent) {
    // optimize internal component instantiation
    // since dynamic options merging is pretty slow, and none of the
    // internal component options needs special treatment.
    initInternalComponent(vm, options as any)
} else {
    vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor as any),
    options || {},
    vm
    )
}

//用于初始化组件生命周期的函数。它接受一个组件实例 vm 作为参数，并在该组件实例上设置一些属性和状态。
//总体来说就是初始化当前组件的很多属性
initLifecycle(vm)
//事件注册
//把父组件的 _parentListeners 传递给当前组件监听
initEvents(vm)
//解析插槽
//绑定createElement 组件实例
//获取 $attrs & $listenters, 并且响应式
initRender(vm)

//解析vm.$options.inject
//defineReactive 响应式
initInjections(vm) // resolve injections before data/props

//if (opts.props) initProps(vm, opts.props)
//if (opts.methods) initMethods(vm, opts.methods)
//if (opts.data) initData(vm)
//if (opts.computed) initComputed(vm, opts.computed)
//if (opts.watch && opts.watch !== nativeWatch) initWatch(vm, opts.watch)
//就是把这些解析出来，然后响应式，挂载在vm上
initState(vm)

//解析 resolveProvided(vm)
//响应式 Object.defineProperty
initProvide(vm) // resolve provide after data/props

//获取组件实例
const instance: ComponentInternalInstance =
  compatMountInstance ||
  (initialVNode.component = createComponentInstance(
    initialVNode,
    parentComponent,
    parentSuspense
  ))

// inject renderer internals for keepAlive
// 将默认的渲染方法，加入到 KeepAliveContext 当然的 render 当中
if (isKeepAlive(initialVNode)) {
  ;(instance.ctx as KeepAliveContext).renderer = internals
}

// resolve props and slots for setup context
// 其实不仅仅是解析，还执行了 setup函数
setupComponent(instance)

// setup() is async. This component relies on async logic to be resolved
// before proceeding
// 处理异步逻辑的情况，需要等待 setup() 函数完成后再继续  
if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
  parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)

  // Give it a placeholder if this is not hydration
  // TODO handle self-defined fallback
  if (!initialVNode.el) {
    const placeholder = (instance.subTree = createVNode(Comment))
    processCommentNode(null, placeholder, container!, anchor)
  }
  return
}

//执行组件的渲染效果函数进行渲染
setupRenderEffect(
  instance,
  initialVNode,
  container,
  anchor,
  parentSuspense,
  isSVG,
  optimized
)

export function setupComponent(
  instance: ComponentInternalInstance,
  isSSR = false
) {
  isInSSRComponentSetup = isSSR

  const { props, children } = instance.vnode
  const isStateful = isStatefulComponent(instance)
  //解析props & slots
  initProps(instance, props, isStateful, isSSR)
  initSlots(instance, children)

  //如果是有状态组件，执行 setup
  const setupResult = isStateful
    ? setupStatefulComponent(instance, isSSR)
    : undefined
  isInSSRComponentSetup = false
  return setupResult
}

//执行setup
function setupStatefulComponent(
  instance: ComponentInternalInstance,
  isSSR: boolean
) {
  const Component = instance.type as ComponentOptions

  // 0. create render proxy property access cache
  instance.accessCache = Object.create(null)
  // 1. create public instance / render proxy
  // also mark it raw so it's never observed
  instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))

  // 2. call setup()
  const { setup } = Component
  if (setup) {
    const setupContext = (instance.setupContext =
      setup.length > 1 ? createSetupContext(instance) : null)

    setCurrentInstance(instance)
    pauseTracking()
    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
    )
    resetTracking()
    unsetCurrentInstance()

    if (isPromise(setupResult)) {
      setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
      if (isSSR) {
        // return the promise so server-renderer can wait on it
        return setupResult
          .then((resolvedResult: unknown) => {
            handleSetupResult(instance, resolvedResult, isSSR)
          })
          .catch(e => {
            handleError(e, instance, ErrorCodes.SETUP_FUNCTION)
          })
      } else if (__FEATURE_SUSPENSE__) {
        // async setup returned Promise.
        // bail here and wait for re-entry.
        instance.asyncDep = setupResult
        if (__DEV__ && !instance.suspense) {
          const name = Component.name ?? 'Anonymous'
          warn(
            `Component <${name}>: setup function returned a promise, but no ` +
              `<Suspense> boundary was found in the parent component tree. ` +
              `A component with async setup() must be nested in a <Suspense> ` +
              `in order to be rendered.`
          )
        }
      } else if (__DEV__) {
        warn(
          `setup() returned a Promise, but the version of Vue you are using ` +
            `does not support it yet.`
        )
      }
    } else {
      handleSetupResult(instance, setupResult, isSSR)
    }
  } else {
    finishComponentSetup(instance, isSSR)
  }
}

isFunction(setupResult) //返回渲染函数
isObject(setupResult) //返回绑定对象，绑定到 setupState 当中

import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance()
console.log('instance???', instance.appContext.config.globalProperties)

const setupContext = (instance.setupContext =
  setup.length > 1 ? createSetupContext(instance) : null)

setCurrentInstance(instance)
pauseTracking()
const setupResult = callWithErrorHandling(
  setup,
  instance,
  ErrorCodes.SETUP_FUNCTION,
  [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
)

<child v-on=`customEvent`>something</child>

//child
const triggerEvent = () => {
  const payload = 'Hello from child component!';
  emit('customEvent', payload);
};

let attrs: Data
if (__DEV__) {
  // We use getters in dev in case libs like test-utils overwrite instance
  // properties (overwrites should not be done in prod)
  return Object.freeze({
    get attrs() {
      return attrs || (attrs = createAttrsProxy(instance))
    },
    get slots() {
      return shallowReadonly(instance.slots)
    },
    get emit() {
      return (event: string, ...args: any[]) => instance.emit(event, ...args)
    },
    expose
  })
} else {
  return {
    get attrs() {
      return attrs || (attrs = createAttrsProxy(instance))
    },
    slots: instance.slots,
    emit: instance.emit,
    expose
  }
}

let provides = currentInstance.provides
// by default an instance inherits its parent's provides object
// but when it needs to provide values of its own, it creates its
// own provides object using parent provides object as prototype.
// this way in `inject` we can simply look up injections from direct
// parent and let the prototype chain do the work.
const parentProvides =
  currentInstance.parent && currentInstance.parent.provides
if (parentProvides === provides) {
  provides = currentInstance.provides = Object.create(parentProvides)
}
// TS doesn't allow symbol as index type
provides[key as string] = value

provides: parent ? parent.provides : Object.create(appContext.provides),