文中摘自微信公众平台「三分钟学前面」，作者sisterAn。转截文中请联络三分钟学前面微信公众号。
监视一个自变量的转变，当自变量转变时运行一些实际操作，这相近如今时兴的前端框架(例如 React、Vue等)中的数据关联作用，在数据升级时自动升级 DOM 3D渲染，那麼怎样完成数据关联喃?
文中得出二种思路：
- ES5 的 Object.defineProperty
- ES6 的 Proxy
ES5 的 Object.defineProperty
Object.defineProperty() 方式会立即在一个对象上界定一个新属性，或是改动一个对象的目前属性，并回到此对象
——MDN
Object.defineProperty(obj,prop,descriptor)
在其中：
- obj ：要界定属性的对象
- prop ：要定义或改动的属性的命名或 Symbol
- descriptor ：要界定或改动的属性描述符
varuser={name:'sisterAn'}Object.defineProperty(user,'name',{enumerable:true,configurable:true,set:function(newVal){this._name=newValconsole.log('set:' this._name)},get:function(){console.log('get:' this._name)returnthis._name}})user.name='an'//set:anconsole.log(user.name)//get:an
如果是详细的对自变量的每一个子属性开展监视：
//监控对象functionobserve(obj){//解析xml对象，应用get/set彻底改变对象的每一个属性值Object.keys(obj).map(key=>{defineReactive(obj,key,obj[key])})}functiondefineReactive(obj,k,v){//递归法子属性if(typeof(v)==='object')observe(v)//重界定get/setObject.defineProperty(obj,k,{enumerable:true,configurable:true,get:functionreactiveGetter(){console.log('get:' v)returnv},//再次设定值时，开启回收器的通告体制set:functionreactiveSetter(newV){console.log('set:' newV)v=newV},})}letdata={a:1}//监控对象observe(data)data.a//get:1data.a=2//set:2
根据 map 解析xml，根据深层递归法监视子子属性
留意， Object.defineProperty 有着下列缺点：
- IE8 及更低版 IE 是不可以的
- 没法监测到对象属性的新增加或删掉
- 假如改动二维数组的 length ( Object.defineProperty 不可以监视二维数组的长短)，及其二维数组的 push 等基因变异方式是没法开启 setter 的
对于此事，大家看一下 vue2.x 是如何解决这方面的?
vue2.x 中怎样检测二维数组转变
应用了函数公式挟持的方法，重新写过了二维数组的方式，Vue 将 data 中的二维数组开展了原型链重新写过，偏向了自身界定的二维数组原形方式。那样当启用二维数组 api 时，可以通告依靠升级。假如二维数组中包括着引用类型，会对字符串中的引用类型再度递归法解析xml开展监管。那样就保持了检测二维数组转变。
针对二维数组来讲，Vue 内部结构重新写过了下列函数公式完成发放升级
//得到二维数组原形constarrayProto=Array.prototypeexportconstarrayMethods=Object.create(arrayProto)//重写下列函数constmethodsToPatch=['push','pop','shift','unshift','splice','sort','reverse']methodsToPatch.forEach(function(method){//缓存文件原生态函数constoriginal=arrayProto[method]//重写函数def(arrayMethods,method,functionmutator(...args){//先启用原生态函数得到結果constresult=original.apply(this,args)constob=this.._ob__letinserted//启用下列好多个函数时，监视新数据switch(method){case'push':case'unshift':inserted=argsbreakcase'splice':inserted=args.slice(2)break}if(inserted)ob.observeArray(inserted)//手动式发放升级ob.dep.notify()returnresult})})
vue2.x 怎么解决给对象新增加属性不容易开启部件再次3D渲染的问题
受当代 JavaScript 的限定 ( Object.observe 已被废旧)，Vue 没法监测到对象属性的添加或删掉。
因为 Vue 会在复位案例时对属性实行 getter/setter 转换，因此属性务必在 data 对象上存有才可以让 Vue 将它转化为响应式的。
针对早已建立的案例，Vue 不允许动态性添加根等级的响应式属性。可是，可以应用 Vue.set(object, propertyName, value) 方式向嵌入对象添加响应式属性。
vm.$set()完成基本原理
exportfunctionset(target:Array<any>|Object,key:any,val:any):any{//target为二维数组if(Array.isArray(target)&&isValidArrayIndex(key)){//改动二维数组的长短,防止数据库索引>数组长度造成splice()实行不正确target.length=Math.max(target.length,key);//运用二维数组的splice方式开启响应式target.splice(key,1,val);returnval;}//target为对象,key在target或是target.prototype上且务必不可以在Object.prototype上,立即取值if(keyintarget&&!(keyinObject.prototype)){target[key]=val;returnval;}//以上也不创立,即逐渐给target建立一个全新升级的属性//获得Observer案例constob=(target:any).._ob__;//target自身就并不是响应式数据信息,立即取值if(!ob){target[key]=val;returnval;}//开展响应式解决defineReactive(ob.value,key,val);ob.dep.notify();returnval;}
- 假如目的是二维数组,应用 vue 完成的基因变异方式 splice 完成响应式
- 假如目的是对象,分辨属性存有,即是响应式,立即赋值
- 假如 target 自身就并不是响应式,立即赋值
- 假如属性并不是响应式,则启用 defineReactive 方式开展响应式解决
ES6 的 Proxy
大家都知道，尤极大地 vue3.0 版本用 Proxy 替代了defineProperty 来完成数据信息关联，由于 Proxy 可以立即监视对象和二维数组的转变，而且有高达 13 种阻拦方式。而且做为新标准将遭受电脑浏览器生产商关键不断的性能优化。
Proxy
Proxy 对象用以建立一个对象的代理，进而完成操作过程的屏蔽和自定(如属性搜索、赋值、枚举类型、调用函数等)
— MDN
constp=newProxy(target,handler)
在其中：
- target ：要应用 Proxy 包裝的总体目标对象(可以是任意种类的对象，包含原生态二维数组，函数公式，乃至另一个代理)
- handler ：一个通常以函数公式做为属性的对象，各属性中的函数公式各自界定了在实行多种实际操作时代理 p 的个人行为
varhandler={get:function(target,name){returnnameintarget?target[name]:'noprop!'},set:function(target,prop,value,receiver){target[prop]=value;console.log('propertyset:' prop '=' value);returntrue;}};varuser=newProxy({},handler)user.name='an'//propertyset:name=anconsole.log(user.name)//anconsole.log(user.age)//noprop!
上边提及过 Proxy 一共给予了 13 种阻拦个人行为，分别是：
- getPrototypeOf / setPrototypeOf
- isExtensible / preventExtensions
- ownKeys / getOwnPropertyDescriptor
- defineProperty / deleteProperty
- get / set / has
- apply / construct
有兴趣的可以查询 MDN ，一一试着一下，这儿不会再赘述
此外考虑到2个问题：
- Proxy只能代理对象的第一层，那麼又是如何解决这个问题的呢?
- 检测二维数组的情况下很有可能开启多次get/set，那麼如何防止开启多次呢(由于获得push和改动length的过程中也会开启)
Vue3 Proxy
针对第一个问题，我们可以分辨现阶段 Reflect.get 的传参是不是为 Object ，如果是则再根据 reactive 方式做代理， 那样就保持了深层观察。
针对第二个问题，我们可以分辨是不是 hasOwProperty
下边我们自己写个实例，根据proxy 自定获得、提升、删掉等个人行为
consttoProxy=newWeakMap();//储放被代理过的对象consttoRaw=newWeakMap();//存放早已代理过的对象functionreactive(target){//建立响应式对象returncreateReactiveObject(target);}functionisObject(target){returntypeoftarget==="object"&&target!==null;}functionhasOwn(target,key){returntarget.hasOwnProperty(key);}functioncreateReactiveObject(target){if(!isObject(target)){returntarget;}letobserved=toProxy.get(target);if(observed){//分辨能否被代理过returnobserved;}if(toRaw.has(target)){//分辨是不是要反复代理returntarget;}consthandlers={get(target,key,receiver){letres=Reflect.get(target,key,receiver);track(target,'get',key);//依赖收集==returnisObject(res)?reactive(res):res;},set(target,key,value,receiver){letoldValue=target[key];lethadKey=hasOwn(target,key);letresult=Reflect.set(target,key,value,receiver);if(!hadKey){trigger(target,'add',key);//触发添加}elseif(oldValue!==value){trigger(target,'set',key);//触发修改}returnresult;},deleteProperty(target,key){console.log("删掉");constresult=Reflect.deleteProperty(target,key);returnresult;}};//逐渐代理商observed=newProxy(target,handlers);toProxy.set(target,observed);toRaw.set(observed,target);//做投射表returnobserved;}
汇总
Proxy 对比于 defineProperty 的优点：
根据 Proxy 和 Reflect ，可以原生态监视二维数组，可以监视目标特性的添加和删掉
不用深层解析xml监视：分辨现阶段 Reflect.get 的传参是不是为 Object ，如果是则再根据 reactive 方式做微商， 那样就保持了深层观察
只在 getter 时才对另一半的下一层开展挟持(提升了特性)
因此，提议应用 Proxy 检测自变量转变
参照
MDN
陪你掌握 vue-next(Vue 3.0)之 驾轻就熟