VUE 3.0源码之reactive

本文详细介绍了Vue 3.0中reactive的实现过程,从常规调用流程出发,深入到createReactiveObject的判断与Proxy的使用,特别是mutableHandlers中的get和set方法,如何实现依赖收集、子属性代理以及性能优化。
摘要由CSDN通过智能技术生成

常规调用流程

1. reactive

这里会先做一个简单的判断,如果通过则调用createReactiveObject

function reactive(target: object) {
   
	// 如果只读,则直接返回target
	if (target && (target as Target).__v_isReadonly) {
   
    return target
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers
  )
}

2. createReactiveObject

这里会做一些可行性和是否代理过的判断,都通过后会调用new Proxy实现代理,具体实现在mutableHandlers

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
   
  if (!isObject(target)) {
   
    if (__DEV__) {
   
      console.warn(`value cannot be made reactive: ${
     String(target)}`)
    }
    return target
  }
  // 如果已代理则直接返回,除非是只读的
  if (target.__v_raw && !(isReadonly && target.__v_isReactive)) {
   
    return target
  }
  // 判断是否有相应代理,如果有则直接返回代理
  if (
    hasOwn(target, isReadonly ? ReactiveFlags.readonly : ReactiveFlags.reactive)
  ) {
   
    return isReadonly ? target.__v_readonly : target.__v_reactive
  }
  // 判断是否可代理
  
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值