ES6-proxy和Reflect以及vue3.0的响应式 _ES6-proxy

【ES6-proxy和Reflect以及vue3.0的响应式】vue3.0中把响应式改成了proxy替代了以前的Object.defineProperty的形式；
vue3.0的包目录截图；

文章插图

其中：

compiler-core：编译器核心compiler-dom：针对浏览器的编译模块compiler-ssr：针对服务器渲染的编译模块reactivity：响应式系统runtime-core：运行时核心runtime-dom：针对浏览器运行模块shared：共享内容vue：完整版本

响应式核心，使用的proxy代理和Reflect反射，源码截图；

文章插图
响应式模块图1

文章插图
响应式模块-proxy代理
Proxy是ES6的新语法，可以直接监听对象和数组的变化。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器” 。---ECMAScript 6 入门阮一峰
const observed = new Proxy(target, baseHandle);new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数是一个配置对象，用来定制拦截行为。
Proxy 有多达13种拦截方法，一共 13 种，具体可以看《ECMAScript 6 入门》阮一峰。

get(target, propKey, receiver)：get方法用于拦截某个属性的读取操作，比如proxy.foo和proxy['foo'] 。可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象）set(target, propKey, value, receiver)：set方法用来拦截某个属性的赋值操作，比如proxy.foo = v或proxy['foo'] = v，返回一个布尔值可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身

Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。Reflect也有13种方法和Proxy一一对应；
简写reactive -proxy响应式
main.js

import { reactive, effect } from './reactivity'const obj = reactive({ name: 'zhangsan', age: 18, arr: [1, 2, 3, 4] });obj.nameobj.name = "lisi"

reactivity/reactive.js

import { moutableHanlder } from './baseHandles'console.log("====my reactive====");export function reactive(target) { return createReactiveObject(target, moutableHanlder)}function createReactiveObject(target, baseHandle) {if (!isObject(target)) {//判断是普通值，和null直接返回targetreturn target;}const observed = new Proxy(target, baseHandle);return observed;}

reactivity/baseHandles.js

import { reactive } from "../reactivity/reactive";const get = createGetter();const set = createSetter();export const moutableHanlder = {get,set}function createGetter() {return function get(target, key, receiver) {const res = Reflect.get(target, key, receiver)console.log("=取值==target:" + JSON.stringify(target) + "==key:" + key);if (isObject(res)) {//对象里嵌套对象，需要递归return reactive(res)}return res;}}function createSetter() {return function set(target, key, value, receiver) {const hasKey = hadOwn(target, key);//判断上次和这次值是否一致，一致不length操作const oldValue = https://www.isolves.com/it/wl/zs/2020-07-05/target[key];if (!hasKey) {console.log("属性新增操作" + target, key)} else if (value != oldValue) {//edit操作console.log("属性修改操作" + JSON.stringify(target) + "==key:" + key + "==value:" + value)}//其他情况，值没有发生变化const res = Reflect.set(target, key, value, receiver);// console.log("设置值 ===target:" + target + "----key:" + key + "----value:" + value);// console.log("set-length:" + target.length);return res;}}

控制台响应截图：