reactive方法createReactiveObject速览(1)

reactive定义是通过createReactiveObject方法实现的,以下简述其内容
1.判断传入的值,如果不是object类型的,直接返回当前值

  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }

示例如下:
const notObj = reactive(1)
console.log(notObj) // 1 警告:value cannot be made reactive: 1

2.如果传入的值已经进行proxy代理,并且不是只读的reactive对象,直接返回当前值

  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }

示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(reactiveVal1)
console.log(reactiveVal1 === reactiveVal2) // true

3.如果proxyMap映射中已经存在该对象的proxy映射,则直接返回之前映射的内容

  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }

示例如下:
import { reactive } from 'vue';
const obj = { a: 1}
const reactiveVal1 = reactive(obj)
const reactiveVal2 = reactive(obj)
console.log(reactiveVal1 === reactiveVal2) // true

4.一些特殊的值是不能进行proxy代理的,如日期、正则、promise,直接返回传入的值

  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }

示例如下:
const date = new Date()
const notAllowObj = reactive(date)
console.log(notAllowObj) // Wed Feb 01 2023 20:15:33 GMT+0800 (中国标准时间)

5.其他对象,Array/Object通过baseHandlers对象进行代理,
Map/Set/WeakMap/WeakSet通过collectionHandlers对象进行代理

  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  proxyMap.set(target, proxy)
  return proxy

下文则继续对本文中提到的baseHandlers对象进行展开!
本人菜鸡,有问题望前辈及时指出,不胜感激!!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容