【学习笔记】Vue3源码解析：第五部分 - 实现渲染（3）

课程地址：【已完结】全网最详细Vue3源码解析！（一行行带你手写Vue3源码）

第五部分-：（对应课程的第36 - 37节）

第36节：《处理proxy，方便取值》

1、执行组件中的 render 方法并传递实例对象为参数：

2、在组件render函数中打印proxy，即传递的实例对象这个参数：

观察打印出的结果，会发现此时如果想取到props中的数据，需要 proxy.props.name 的形式。但之前在源码中测试发现，直接 proxy.name 就可以取到。为了实现这个效果，我们用一个 Proxy 来实现：

这样我们就实现了在render方法中用 proxy.name 的形式直接取到值：

补充Proxy中的set方法：

测试在 render 方法中直接通过 proxy.name 取值：

第37节：《处理render方法》

1、如果组件中有render函数，同时setup的返回值也是一个函数，则只会执行setup返回的这个函数，而不会再执行render函数：

2、完善代码：判断组件有没有 setup，如果有，执行 setup 并拿到其返回值，setup 的返回值可能是一个对象，也可能是一个函数。如果是对象，就将这个对象的值放到组件实例 instance 的 setupState 中；如果是函数，就将其作为render函数来处理。

3、在组件实例对象上增加一个render属性：

4、定义 handelSetupResult 方法：

5、定义 finishComponentSetup 方法：

6、在setup中添加一个函数类型的返回值，此时 finishComponentSetup 方法中打印出来的 instance.render 就是setup函数中返回的这个函数：

总结：