vue2,vue3响应式的理解

vue2的话主要使用的是defineProperty对已有属性添加get,set,从而完成对数据的响应式控制，但每次需要for循环对属性进行遍历

	function DefineReactive(target, key, value) {//存在多层嵌套的objectObserver(value);Object.defineReactive(target, key, {get() {return value;},set(newValue) {if(value !== newValue) {value = newValue;Observer(newValue);	}} })
}function Observer(data) {if (typeof data !== 'object' || data === null) {return data;
}for (let i in data) {DefineReactive(data, i, data[i])
}
}

vue3的响应式原理是借助new Proxy完成对数据的控制，可以解决vue2中不能对map,set或者一些自定义数据类型的数据绑定

let proxyHandler = {get(target, key) {return target[key]
},set(target, key, value) {target[key] = value;}
}
const reactive(target) {return newProxy(target, proxyHandler);
}