结合Vue3-demo项目分析源码（四）

function setupStatefulComponent(
  instance: ComponentInternalInstance,
  isSSR: boolean
) {
  const Component = instance.type as ComponentOptions
  // 1. 创建当前组件实例的代理对象
  instance.proxy = new Proxy(instance.ctx, PublicInstanceProxyHandlers)
  // 2. 如果组件提供了 setup 方法
     const { setup } = Component
  if (setup) {
    // setup 的上下文对象
    const setupContext = (instance.setupContext =
      setup.length > 1 ? createSetupContext(instance) : null)

    currentInstance = instance
    pauseTracking()
    // 调用 setup 方法，获取返回值 setupResult
    const setupResult = callWithErrorHandling(
      setup,
      instance,
      ErrorCodes.SETUP_FUNCTION,
      [__DEV__ ? shallowReadonly(instance.props) : instance.props, setupContext]
    )
    resetTracking()
    currentInstance = null
        // 处理 setup 方法返回值
    if (isPromise(setupResult)) {
      if (isSSR) {
        // return the promise so server-renderer can wait on it
        return setupResult.then((resolvedResult: unknown) => {
          handleSetupResult(instance, resolvedResult, isSSR)
        })
      } else if (__FEATURE_SUSPENSE__) {
        // async setup returned Promise.
        // bail here and wait for re-entry.
        instance.asyncDep = setupResult
      } else if (__DEV__) {
        warn(
          `setup() returned a Promise, but the version of Vue you are using ` +
            `does not support it yet.`
        )
      }
    } else {
      // 返回值为非 promise 对象的类型时候，调用 handleSetupResult 方法处理返回值
      handleSetupResult(instance, setupResult, isSSR)
    }
  } else {
    // 完成组件的创建
    finishComponentSetup(instance, isSSR)
  }
}

//使用setup前
created() {
    console.log(this.$props);
    console.log(" this 就是组件实例的代理对象 proxy");
    // 调用全局的方法
    this.$showSuccuessDialog("我是全局的 showSuccuessDialog 方法");
},
//使用setup后
setup(props,setupContext){
    const instance = getCurrentInstance();
    console.log(props)
    console.log("instance为组件实例的代理对象proxy，即先前的this")
    console.log(instance.proxy);//即先前的this
    //调用全局方法
    instance.proxy.$showSuccessDialog("全局showSuccessDialog方法");
}

export function createSetupContext(
  instance: ComponentInternalInstance
): SetupContext {
  const expose: SetupContext['expose'] = exposed => {
    if (__DEV__ && instance.exposed) {
      warn(`expose() should be called only once per setup().`)
    }
    instance.exposed = proxyRefs(exposed)
  }

  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 props() {
        return instance.props
      },
      get attrs() {
        return new Proxy(instance.attrs, attrHandlers)
      },
      get slots() {
        return shallowReadonly(instance.slots)
      },
      get emit() {
        return (event: string, ...args: any[]) => instance.emit(event, ...args)
      },
      expose
    })
  } else {
    return {
      attrs: instance.attrs,
      slots: instance.slots,
      emit: instance.emit,
      expose
    }
  }
}

export function handleSetupResult(
  instance: ComponentInternalInstance,
  setupResult: unknown,
  isSSR: boolean
) {
  //若返回值为方法
  if (isFunction(setupResult)) {
    // setup returned an inline render function
    if (__NODE_JS__ && (instance.type as ComponentOptions).__ssrInlineRender) {
      // when the function's name is `ssrRender` (compiled by SFC inline mode),
      // set it as ssrRender instead.
      instance.ssrRender = setupResult
    } else {
      //返回的不是ssr函数，则把返回的方法给instance的render属性
      instance.render = setupResult as InternalRenderFunction
    }
  //返回值是对象
  } else if (isObject(setupResult)) {
    ...
    //直接将返回的对象给instance的setupState属性
    instance.setupState = proxyRefs(setupResult)
    ...
  } else if (__DEV__ && setupResult !== undefined) {
    warn(
      `setup() should return an object. Received: ${
        setupResult === null ? 'null' : typeof setupResult
      }`
    )
  }
  //完成组件setup
  finishComponentSetup(instance, isSSR)
}

setup(props,setupContext){
    const instance = getCurrentInstance();
    console.log(props)
    console.log("instance为组件实例的代理对象proxy，即先前的this")
    console.log(instance.proxy);//即先前的this
    //调用全局方法
    instance.proxy.$showSuccessDialog("全局showSuccessDialog方法");
    onMounted(()=>{
        //获取暴露在hello组件ref对象的name属性
        console.log(instance.proxy.$refs["refHello"].name);
    });
    //setup返回值为方法
    return () => h("div","setup返回了一个方法");
}

setup(props,setupContext){
    const instance = getCurrentInstance();
    console.log(props)
    console.log("instance为组件实例的代理对象proxy，即先前的this")
    console.log(instance.proxy);//即先前的this
    //调用全局方法
    instance.proxy.$showSuccessDialog("全局showSuccessDialog方法");
    onMounted(()=>{
        //获取暴露在hello组件ref对象的name属性
        console.log(instance.proxy.$refs["refHello"].name);
    });
    //setup返回值为方法
    // return () => h("div","setup返回了一个方法");
    //返回值为对象
    return {
        setupMsg: "setup返回了一个对象，我是属性setupMsg"
    }
}

function finishComponentSetup(
  instance: ComponentInternalInstance,
  isSSR: boolean
) {
  const Component = instance.type as ComponentOptions

  // template / render function normalization
  if (__NODE_JS__ && isSSR) {
    //若组件有render方法，则直接将其赋予组件实例
    if (Component.render) {
      instance.render = Component.render as InternalRenderFunction
    }
  } else if (!instance.render) {
    // could be set from setup()
    //若组件提供了template属性，则调用compile方法将它转换为render函数
    if (compile && Component.template && !Component.render) {
      if (__DEV__) {
        startMeasure(instance, `compile`)
      }
      Component.render = compile(Component.template, {
        isCustomElement: instance.appContext.config.isCustomElement,
        delimiters: Component.delimiters
      })
      if (__DEV__) {
        endMeasure(instance, `compile`)
      }
    }

    instance.render = (Component.render || NOOP) as InternalRenderFunction
    ...
  }

  //兼容Vue2组件参数
  // support for 2.x options
  if (__FEATURE_OPTIONS_API__) {
    currentInstance = instance
    pauseTracking()
    applyOptions(instance, Component)
    resetTracking()
    currentInstance = null
  }

  ...
}

export function applyOptions(
  instance: ComponentInternalInstance,
  options: ComponentOptions,
  deferredData: DataFn[] = [],
  deferredWatch: ComponentWatchOptions[] = [],
  deferredProvide: (Data | Function)[] = [],
  asMixin: boolean = false
) {
  ...
  // applyOptions is called non-as-mixin once per instance
  //开始调用beforeCreate生命周期
  if (!asMixin) {
    isInBeforeCreate = true
    callSyncHook(
      'beforeCreate',
      LifecycleHooks.BEFORE_CREATE,
      options,
      instance,
      globalMixins
    )
    isInBeforeCreate = false
    // global mixins are applied first
    //应用全局的mixins
    applyMixins(
      instance,
      globalMixins,
      deferredData,
      deferredWatch,
      deferredProvide
    )
  }

  // extending a base component...
  //处理extends属性
  if (extendsOptions) {
    applyOptions(
      instance,
      extendsOptions,
      deferredData,
      deferredWatch,
      deferredProvide,
      true
    )
  }
  // local mixins
  //处理本地mixins
  if (mixins) {
    applyMixins(instance, mixins, deferredData, deferredWatch, deferredProvide)
  }
  ...
  
  //处理inject属性
  if (injectOptions) {
    ...
  }
  //处理methods属性
  if (methods) {
    ...
  }
  //处理data属性
  if (!asMixin) {
    if (deferredData.length) {
      deferredData.forEach(dataFn => resolveData(instance, dataFn, publicThis))
    }
    if (dataOptions) {
      resolveData(instance, dataOptions, publicThis)
    }
    ...
  } else if (dataOptions) {
    deferredData.push(dataOptions as DataFn)
  }
  //处理computed属性
  if (computedOptions) {
    ...
  }
  //处理watch属性
  if (watchOptions) {
    deferredWatch.push(watchOptions)
  }
  ...

  //处理provide属性
  if (provideOptions) {
    deferredProvide.push(provideOptions)
  }
  ...

  // asset options.
  // To reduce memory usage, only components with mixins or extends will have
  // resolved asset registry attached to instance.
  //处理components
  if (asMixin) {
    if (components) {
      ...
    }
    //处理directives
    if (directives) {
      ...
    }
  }

  // lifecycle options
  //调用created生命周期
  if (!asMixin) {
    callSyncHook(
      'created',
      LifecycleHooks.CREATED,
      options,
      instance,
      globalMixins
    )
  }
  //处理beforeMount、mount等生命周期
  if (beforeMount) {
    onBeforeMount(beforeMount.bind(publicThis))
  }
  if (mounted) {
    onMounted(mounted.bind(publicThis))
  }
  ...
  //兼容Vue2的expose属性
  if (isArray(expose)) {
    if (!asMixin) {
      if (expose.length) {
        const exposed = instance.exposed || (instance.exposed = proxyRefs({}))
        expose.forEach(key => {
          exposed[key] = toRef(publicThis, key as any)
        })
      } else if (!instance.exposed) {
        instance.exposed = EMPTY_OBJ
      }
    } else if (__DEV__) {
      warn(`The \`expose\` option is ignored when used in mixins.`)
    }
  }
}