Vue3源码解读：内置代理

「已注销」

已于 2023-03-22 12:42:10 修改

阅读量249

点赞数

分类专栏： Vue 文章标签： vue

于 2023-03-21 19:19:11 首次发布

本文链接：https://blog.csdn.net/weixin_45895753/article/details/129695140

版权

Vue 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

除了用户可以使用reactive、shallowReactive、readonly、shallowReadonly创建代理外，Vue3内部也创建了若干代理。

一渲染代理

创建组件实例时，会创建组件的渲染代理。

function setupStatefulComponent(instance,isSSR) {
  // ...
  
  instance.proxy = markRaw( // 标记为不可代理
    new Proxy(instance.ctx, PublicInstanceProxyHandlers) // 创建代理
  ) 

  // ...
}

二输入属性代理

浏览器端渲染类组件时，会创建输入属性代理。

if (isStateful) {
  instance.props = isSSR ? props : shallowReactive(props) 
}

三透传属性代理

创建setup函数的上下文时，会创建透传属性代理。

export function createSetupContext(instance){
  // ...
  return {
    get attrs() {
      return attrs || (attrs = createAttrsProxy(instance))
    },
    slots: instance.slots,
    emit: instance.emit,
    expose
  }
}

四暴露代理

子组件若有expose，父组件中访问子组件时使用的是暴露代理。

export function setRef(rawRef, oldRawRef, parentSuspense, vnode, isUnmount) {
  // ...
  const refValue =
    vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
      ? getExposeProxy(vnode.component) || vnode.component.proxy
      : vnode.el;
  // ...
}