可见，通过proxyObj方法，我们可以实现把任何一个对象都过滤一次，然后返回新的代理对象，被处理的对象会把所有_开头的变量给拦截掉，更进一步，如果有用过mobx的同学会发现mobx里面的store中的对象都是类似于这样的
有handler 和 target，说明mobx本身也是用了代理模式，同时加上Decorator函数，在这里就相当于把proxyObj使用装饰器的方式来实现，Proxy + Decorator 就是mobx的核心原理啦~
vue响应式数据实现
VUE的双向绑定涉及到模板编译，响应式数据，订阅者模式等等，有兴趣的可以看这里 ，因为这篇文章的主题是proxy，因此我们着重介绍一下数据响应式的过程。
2.x版本
在当前的vue2.x的版本中，在data中声名一个obj后，vue会利用Object.defineProperty来递归的给data中的数据加上get和set，然后每次set的时候，加入额外的逻辑。来触发对应模板视图的更新，看下伪代码：
const defineReactiveData = data => { Object.keys(data).forEach(key => { let value = data[key]; Object.defineProperty(data, key, { get : function(){ console.log(`getting ${key}`) return value; }, set : function(newValue){ console.log(`setting ${key}`) notify() // 通知相关的模板进行编译 value = newValue; }, enumerable : true, configurable : true }) }) }
这个方法可以给data上面的所有属性都加上get和set，当然这只是伪代码，实际场景下我们还需要考虑如果某个属性还是对象我们应该递归下去，来试试：
const data = { name: 'nanjing', age: 19 } defineReactiveData(data) data.name // getting name 'nanjing' data.name = 'beijing'; // setting name
可以看到当我们get和set触发的时候，已经能够同时触发我们想要调用的函数拉，Vue双向绑定过程中，当改变this上的data的时候去更新模板的核心原理就是这个方法，通过它我们就能在data的某个属性被set的时候，去触发对应模板的更新。
现在我们在来试试下面的代码：
const data = { userIds: ['01','02','03','04','05'] } defineReactiveData(data); data.userIds // getting userIds ["01", "02", "03", "04", "05"] // get 过程是没有问题的，现在我们尝试给数组中push一个数据 data.userIds.push('06') // getting userIds
what ? setting没有被触发，反而因为取了一次userIds所以触发了一次getting~，
不仅如此，很多数组的方法都不会触发setting，比如：push,pop,shift,unshift,splice,sort,reverse这些方法都会改变数组，但是不会触发set，所以Vue为了解决这个问题，重新包装了这些函数，同时当这些方法被调用的时候，手动去触发notify()；看下源码：
// 获得数组原型 const arrayProto = Array.prototype export const arrayMethods = Object.create(arrayProto) // 重写以下函数 const methodsToPatch = [ 'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse', ] methodsToPatch.forEach(function(method) { // 缓存原生函数 const original = arrayProto[method] // 重写函数 def(arrayMethods, method, function mutator(...args) { // 先调用原生函数获得结果 const result = original.apply(this, args) const ob = this.__ob__ let inserted // 调用以下几个函数时，监听新数据 switch (method) { case 'push': case 'unshift': inserted = args break case 'splice': inserted = args.slice(2) break } if (inserted) ob.observeArray(inserted) // 手动派发更新 ob.dep.notify() return result }) })
上面是官方的源码，我们可以实现一下push的伪代码，为了省事，直接在prototype上下手了~
const push = Array.prototype.push; Array.prototype.push = function(...args){ console.log('push is happenning'); return push.apply(this, args); } data.userIds.push('123') // push is happenning
通过这种方式，我们可以监听到这些的变化，但是vue官方文档中有这么一个注意事项
由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength