vue3-reactive源码详细解析

忘是亡心i 2022-10-30 13:25 239阅读 0赞

const reactiveMap = new WeakMap();
    //reactive入口函数⭐️⭐️⭐️⭐️⭐️
    function reactive(target) {
          // if trying to observe a readonly proxy, return the readonly version.
          if (target && target["__v_isReadonly" /* IS_READONLY */]) {
              return target;
          }
          return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);//⭐️⭐️⭐️⭐️⭐️mutableHandlers  和  mutableCollectionHandlers对象注意
      }
    //创建一个recativeobject函数⭐️⭐️⭐️⭐️⭐️
    function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers) {
          if (!isObject(target)) {//⭐️判断是不是对象
              {
                  console.warn(`value cannot be made reactive: ${String(target)}`);
              }
              return target;
          }
          // target is already a Proxy, return it.
          // exception: calling readonly() on a reactive object
          if (target["__v_raw" /* RAW */] &&
              !(isReadonly && target["__v_isReactive" /* IS_REACTIVE */])) {
              return target;
          }
          // target already has corresponding Proxy
          const proxyMap = reactiveMap;//⭐️弱对象赋值
          const existingProxy = proxyMap.get(target);//⭐️查看target对象是否在缓存中
          if (existingProxy) {
              return existingProxy;
          }
          // only a whitelist of value types can be observed.
          const targetType = getTargetType(target);//⭐️获取target对象类型，实现代码见下
          if (targetType === 0 /* INVALID */) {
              return target;
          }
          const proxy = new Proxy(target, targetType === 2 /* COLLECTION */ ? collectionHandlers : baseHandlers);//⭐️new了一个proxy
          proxyMap.set(target, proxy);//⭐️存储弱对象中
          return proxy;
      }
    
    //⭐️⭐️⭐️⭐️⭐️获取Target类型
    function getTargetType(value) {
          return value["__v_skip" /* SKIP */] || !Object.isExtensible(value)
              ? 0 /* INVALID */
              : targetTypeMap(toRawType(value));
      }
    //⭐️⭐️⭐️⭐️⭐️类型判断具体实现
    function targetTypeMap(rawType) {
          switch (rawType) {
              case 'Object':
              case 'Array':
                  return 1 /* COMMON */;
              case 'Map':
              case 'Set':
              case 'WeakMap':
              case 'WeakSet':
                  return 2 /* COLLECTION */;
              default:
                  return 0 /* INVALID */;
          }
      }
    //⭐️⭐️toRawType
    const toTypeString = (value) => objectToString.call(value);
    const toRawType = (value) => {
          // extract "RawType" from strings like "[object RawType]"
          return toTypeString(value).slice(8, -1);
      };

const mutableHandlers = {
          get,
          set,
          deleteProperty,
          has,
          ownKeys
    };
    
    const get = function createGetter(isReadonly = false, shallow = false) {
          return function get(target, key, receiver) {
              if (key === "__v_isReactive" /* IS_REACTIVE */) {
                  return !isReadonly;
              }
              else if (key === "__v_isReadonly" /* IS_READONLY */) {
                  return isReadonly;
              }
              else if (key === "__v_raw" /* RAW */ &&
                  receiver === (isReadonly ? readonlyMap : reactiveMap).get(target)) {
                  return target;
              }
              const targetIsArray = isArray(target);
              if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
                  return Reflect.get(arrayInstrumentations, key, receiver);
              }
              const res = Reflect.get(target, key, receiver);
              if (isSymbol(key)
                  ? builtInSymbols.has(key)
                  : key === `__proto__` || key === `__v_isRef`) {
                  return res;
              }
              if (!isReadonly) {
                  track(target, "get" /* GET */, key);
              }
              if (shallow) {
                  return res;
              }
              if (isRef(res)) {
                  // ref unwrapping - does not apply for Array + integer key.
                  const shouldUnwrap = !targetIsArray || !isIntegerKey(key);
                  return shouldUnwrap ? res.value : res;
              }
              if (isObject(res)) {
                  // Convert returned value into a proxy as well. we do the isObject check
                  // here to avoid invalid value warning. Also need to lazy access readonly
                  // and reactive here to avoid circular dependency.
                  return isReadonly ? readonly(res) : reactive(res);
              }
              return res;
          };
      }
    const set = function createSetter(shallow = false) {
          return function set(target, key, value, receiver) {
              const oldValue = target[key];
              if (!shallow) {
                  value = toRaw(value);
                  if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
                      oldValue.value = value;
                      return true;
                  }
              }
              const hadKey = isArray(target) && isIntegerKey(key)
                  ? Number(key) < target.length
                  : hasOwn(target, key);
              const result = Reflect.set(target, key, value, receiver);
              // don't trigger if target is something up in the prototype chain of original
              if (target === toRaw(receiver)) {
                  if (!hadKey) {
                      trigger(target, "add" /* ADD */, key, value);
                  }
                  else if (hasChanged(value, oldValue)) {
                      trigger(target, "set" /* SET */, key, value, oldValue);
                  }
              }
              return result;
          };
      }
    
    function deleteProperty(target, key) {
          const hadKey = hasOwn(target, key);
          const oldValue = target[key];
          const result = Reflect.deleteProperty(target, key);
          if (result && hadKey) {
              trigger(target, "delete" /* DELETE */, key, undefined, oldValue);
          }
          return result;
      }
      function has(target, key) {
          const result = Reflect.has(target, key);
          if (!isSymbol(key) || !builtInSymbols.has(key)) {
              track(target, "has" /* HAS */, key);
          }
          return result;
      }
      function ownKeys(target) {
          track(target, "iterate" /* ITERATE */, isArray(target) ? 'length' : ITERATE_KEY);
          return Reflect.ownKeys(target);
      }

const mutableCollectionHandlers = {
          get: createInstrumentationGetter(false, false)
    };
    const hasOwnProperty = Object.prototype.hasOwnProperty;
    const hasOwn = (val, key) => hasOwnProperty.call(val, key);
    function createInstrumentationGetter(isReadonly, shallow) {
          const instrumentations = shallow
              ? shallowInstrumentations
              : isReadonly
                  ? readonlyInstrumentations
                  : mutableInstrumentations;
          return (target, key, receiver) => {
              if (key === "__v_isReactive" /* IS_REACTIVE */) {
                  return !isReadonly;
              }
              else if (key === "__v_isReadonly" /* IS_READONLY */) {
                  return isReadonly;
              }
              else if (key === "__v_raw" /* RAW */) {
                  return target;
              }
              return Reflect.get(hasOwn(instrumentations, key) && key in target
                  ? instrumentations
                  : target, key, receiver);
          };
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-router源码解析

码下载：[github.com/vuejs/vue-r…][github.com_vuejs_vue-r] 1. 简述 vue-router基于Vue组件化的概念...

末蓝、/ 2024年04月17日 13:59/ 0 赞/ 75 阅读

相关 VUE 3.0源码之reactive

> 常规调用流程 1. reactive 这里会先做一个简单的判断，如果通过则调用createReactiveObject function reacti

ゞ浴缸里的玫瑰/ 2023年07月25日 14:18/ 0 赞/ 21 阅读

相关 OkHttp3源码详细解析

OkHttp是一个非常优秀的网络请求框架，已被谷歌加入到Android的源码中。目前比较流行的Retrofit也是默认使用OkHttp的。所以OkHttp的源码是一个不容错过的

秒速五厘米/ 2023年07月17日 07:07/ 0 赞/ 85 阅读

相关 Vue3源码 nextTick解析

![format_png][] > 定义: 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 看完是不是有一堆问号？我们从

╰+哭是因爲堅強的太久メ/ 2022年12月23日 07:24/ 0 赞/ 189 阅读

相关 Vue 源码解析

Vue 源码解析框架地址 [https://www.processon.com/view/link/5d1eb5a0e4b0fdb331d3798c\map][http

水深无声/ 2022年12月11日 11:27/ 0 赞/ 275 阅读

相关 HashMap源码详细解析

HashMap源码详细解析 1、重新认识HashMap 1.1、什么是HashMap？ 1.2、长啥样？

妖狐艹你老母/ 2022年11月30日 01:48/ 0 赞/ 216 阅读

相关 vue3-reactive源码详细解析

const reactiveMap = new WeakMap(); //reactive入口函数⭐️⭐️⭐️⭐️⭐️ function reactiv

忘是亡心i/ 2022年10月30日 13:25/ 0 赞/ 240 阅读

相关 Vue3源码第二篇-Reactive API

Vue3源码笔记系列文章 [Vue3源码第一篇-总览][Vue3_ _-] [Vue3源码第三篇-Vue3是如何实现响应性][Vue3_ _-Vue3] [V

朴灿烈づ我的快乐病毒、/ 2022年09月06日 15:22/ 0 赞/ 320 阅读

相关 Vue源码解析

[https://ustbhuangyi.github.io/vue-analysis/][https_ustbhuangyi.github.io_vue-analysis]

红太狼/ 2022年05月14日 04:40/ 0 赞/ 379 阅读

相关 ThreadLocal详细源码解析

ThreadLocal详细源码解析 1.初始化是一个懒加载的过程，只有在调用get的时候才会获取当前线程内部的ThreadLocalMap map存在

女爷i/ 2022年01月27日 16:07/ 0 赞/ 348 阅读