【Vue源码】Vue3 reactive 理解

📝 学习记录 未完成

在前辈的建议下先去看了这部分，不算是深入理解，第一次看Vue的源码，很多语句看不明白就略过了，只能是勉勉强强手写一个简单的实现。

1.学习Vue3时知道Vue2和Vue3的一大区别在于使用Proxy代替defineproperty。

2.前段时间看了 ES6的Proxy和Reflect，刚好可以帮助自己消化这部分内容。

3.另外最近学了ts，源码中的语法也可以帮助自己巩固这部分内容。

一开始上手看源码，简直是天书一样的存在，头大。就开始从易到难的盘，然后再返回去看源码。最后抱着能懂多少懂多少的态度，别的细节只能有时间再看了。

 源码地址：https://github.com/vuejs/core/blob/main/packages/reactivity/src/reactive.ts

实现分两步：拦截和监听

 👇 核心原理：

// objectList 避免对象重复proxy
let objectList = new WeakMap();
// proxyList 避免proxy对象再次被proxy
let proxyList = new WeakMap();

function reactive(target) {
  let proxy = objectList.get(target);
  // 如果target存在proxy，直接返回proxy
  if (proxy) {
    return proxy;
  }
  // 如果target是proxy，直接返回target
  if (proxyList.has(target)) {
    return target;
  }
  // 如果target是基本类型，直接返回target
  if (!isObject(target)) {
    return target
  }

  proxy = new proxy(target, handle);
  objectList.set(target, proxy);
  proxyList.set(proxy, target);

  return proxy;
}

const handle = {
  get,
  set,
  deleteProperty
};

function get(target, propKey, receiver) {
  console.log('get')
  let proxy = Reflect.get(target, propKey, receiver);
  track(target, 'get', propKey)
  return isObject(proxy) ? reactive(proxy) : proxy;
  //实现多层代理，若为对象，需要递归
}

function isObject(val) {
  return typeof val === 'object' && val !== null;
}

另外就是监听，这一部分代码的实现就比较巧妙了。看懂了，但没完全懂。有时间再细细琢磨吧。

源码阅读辅助资料：深入源码理解Vue3 reactive - 简书

手撕reactive理解底层原理：vue3源码学习——响应式reactive_潇蓝诺依的博客-CSDN博客

👩‍🌾 有时间再看这部分的时候来补充，先去学习优先级高的东西～