Vue3setup实现原理

416 阅读2分钟

setup函数的作用

  • 组件的render函数每次更新时都会重新执行,但是setup函数只会在组件挂载的时候执行一次
  • setup函数是compositionAPI的入口
  • 可以在函数内部编写逻辑,解决vue2中反复横跳问题
  • setup返回函数时为组件的render函数,返回对象时对象中的数据将暴露给模板使用
  • setup中函数的参数为props、context({slots,emit,attrs,expose})

实现:

Image.png

  • 在处理组件实例的时候新增一个属性setupState,用来存setup的返回值

在初始化props和data后处理setup

Image.png

  • 如果用户传了setup,拿到setup返回值,调用的时候把组件实例上的props,和setup的上下文传进去
  • 判断返回值是否是一个函数,如果是一个函数,直接挂载到组件实例的render上
  • 如果是一个对象,用proxyRefs包裹一下,挂载到组件实例的setupState
  • proxyRefs的作用是去value,我们之前文章写过,用proxy代理一下一个传入的对象,取值的时候看看值的上面是否有_v_isRef标识,也就是判断被没被代理过,如果被代理过去.value,没有,则直接取

走完以上逻辑,组件实例上render还是没值,那么我们就把组件传入的render赋值上去

Image.png

  • 其实我们还需要判断模板,这个后续我们实现模板编译原理的再加上模板的判断,先暂时这样写

在组件实例的代理属性proxy上

Image.png

  • 我们之前的文章介绍过,组件实例上有一个proxy代理对象,render渲染的虚拟节点内部的this其实就是指向了这个代理对象
  • 在取值的时候,先从组件实例的data里取,如果没有,去setupState上取,如果还没有,去props上取

从代理对象取值的时候添加setupState取值逻辑

Image.png

下一篇我们将实现事件和插槽