【Vue.js 3.0源码】Composition API之组件渲染初始化过程（下）

自我介绍：大家好，我是吉帅振的网络日志；微信公众号：吉帅振的网络日志；前端开发工程师，工作4年，去过上海、北京，经历创业公司，进过大厂，现在郑州敲代码。

一、执行 setup 函数并获取结果

const setupResult = callWithErrorHandling(setup, instance, 0 /* SETUP_FUNCTION */, [instance.props, setupContext])

我们具体来看一下 callWithErrorHandling 函数的实现：

function callWithErrorHandling (fn, instance, type, args) {

  let res

  try {

    res = args ? fn(...args) : fn()

  }

  catch (err) {

    handleError(err, instance, type)

  }

  return res

}

可以看到，它其实就是对 fn 做的一层包装，内部还是执行了 fn，并在有参数的时候传入参数，所以 setup 的第一个参数是 instance.props，第二个参数是 setupContext。函数执行过程中如果有 JavaScript 执行错误就会捕获错误，并执行 handleError 函数来处理。

执行 setup 函数并拿到了返回的结果，那么接下来就要用 handleSetupResult 函数来处理结果。

handleSetupResult(instance, setupResult)

我们详细看一下 handleSetupResult 函数的实现：

function handleSetupResult(instance, setupResult) {

  if (isFunction(setupResult)) {

    // setup 返回渲染函数

    instance.render = setupResult

  }

  else if (isObject(setupResult)) {

    // 把 setup 返回结果变成响应式

    instance.setupState = reactive(setupResult)

  }

  finishComponentSetup(instance)

}

可以看到，当 setupResult 是一个对象的时候，我们把它变成了响应式并赋值给 instance.setupState，这样在模板渲染的时候，依据前面的代理规则，instance