vue3.0监测机制有了很大的改善，弥补了vue2.0
的一些局限：
- 对属性的添加、删除动作的监测；
- 对数组基于下标的修改、对于 .length 修改的监测；
- 对 Map、Set、WeakMap 和 WeakSet 的支持；
这里为了更好的理解原理手动实现vue3.0的监测对象属性变化的Demo（实际源码中还需考虑map, set等数据类型，这里仅用普通对象为例）
vue3.0 使用proxy代替了vue2.0版本中的defineProperty，首先利用compositionAPI中的 reactive() 函数返回一个proxy对象，使得数据可监测
// reactive() 函数接受一个普通对象 返回一个响应式数据对象
function reactive(target) {
// 通过proxy将对象变为响应式
const observed = new Proxy(target, baseHandler);
// 返回proxy代理后的对象
return observed;
}
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写
var proxy = new Proxy(target, handler);
target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
baseHandler中定义拦截的get set方法，监测和改写数据，为了方便，我们需要先将所有依赖收集起来，一旦数据发生变化，就统一通知更新。就是典型的“发布订阅者”模式，数据变化为“发布者”，依赖对象为“订阅者”。
Proxy 与Reflect 组合使用，Proxy拦截用户对目标对象的访问， 而实际对数据的操作由Reflect来完成
Reflect
Reflect对象与Proxy对象一样，是ES6为了操作对象而提供的新API ，Reflect不能执行new指令。
Reflect作用：优化Object的一些操作方法以及合理的返回Object操作返回的结果。
const baseHandler = {
get(target, key) {
// Reflect.get
const res = Reflect.get(target, key);
// @todo 依赖收集
// 尝试获取值obj.age，触发getter
track(target, key);
return typeof res === "object" ? reactive(res) : res;
},
set(target, key, val) {
const info = { oldValue: target[key], newValue: val };
// Reflect.set
// target[key] = val;
const res = Reflect.set(target, key, val);
// @todo 响应式去通知变化 触发执行，effect函数是响应式对象修改触发的
trigger(target, key, info);
},
};
track() 函数用来收集依赖，将所有 get 的 target 跟 key 以及 effect 建立起对应关系，使用一个全局的 WeakMap 类型变量 targetMap 来存储 target，还需要一个全局的数组来存储 effect
effect是副作用的意思，也就是说它是响应式副产品，每次触发了 get 时收集effect，每次set时在触发这些effects，这样就可以做一些响应式数据之外的一些事情了，比如计算属性computed
function track(target, key) {
const effect = effectStack[effectStack.length - 1];
if (effect) {
let depMap = targetMap.get(target);
if (depMap === undefined) {
depMap = new Map();
targetMap.set(target, depMap);
}
let dep = depMap.get(key);
if (dep === undefined) {
dep = new Set(); // key去重
depMap.set(key, dep);
}
// 以上为容错 target key
if (!dep.has(effect)) {
// 新增依赖
// 双向存储，方便查找优化
dep.add(effect);
effect.deps.push(dep);
}
}
}
trigger() 函数用来通知订阅者，更新数据，执行effect，普通的effect和computed有优先级，effect先执行，computed后执行，因为 computed 可能会依赖普通的 effect
function trigger(target, key, info) {
//1.找到依赖
const depMap = targetMap.get(target);
if (depMap === undefined) {
// 没有依赖直接return
return;
}
// 区分普通的effect和computed有优先级，effect先执行，computed后执行
// 因为 computed 可能会依赖普通的 effect
const effects = new Set();
const computedRunners = new Set();
if (key) {
let deps = depMap.get(key);
deps.forEach((effect) => {
if (effect.computed) {
computedRunners.add(effect);
} else {
effects.add(effect);
}
});
// 拆开执行
effects.forEach((effect) => effect());
computedRunners.forEach((computed) => computed());
}
}
Demo的github地址：https://github.com/lihel/proxy-demo
注：
proxy的兼容性不是很好，由于ES5的限制，ES6新增的Proxy无法被转译成ES5，目前可以通过Polyfill提供部分兼容
https://www.npmjs.com/package/proxy-polyfill
