响应式入门,你了解vue3.0响应式数据怎么实现吗( 四 ) _移动设备

回顾2.x遇到的第一个问题，需要重新包装Array.prototype上的一些方法，使用了proxy后不需要了，解决了~ ，继续看下一个问题vm.userIds.length = 2// getting userIds 先访问// setting length 在设置vm.userIds[1] = '123'// getting userIds 先访问// setting 1 设置index=1的item// "123"
从上面的例子中我们可以看到，不管是直接改变数组的length还是通过某一个下标改变数组的内容， proxy都能拦截到这次变化，这比defineProperty方便太多了， 2.x版本中的第二个问题，在proxy中根本不会出现了。
总结1
通过上面的例子和代码，我们看到Vue的响应模式如果使用proxy会比现在的实现方式要简化和优化很多，很快在即将来临的3.0版本中，大家就可以体验到了。不过因为proxy本身是有兼容性的，比如ie浏览器，所以在低版本的场景下， vue会回退到现在的实现方式。
总结2
回归到proxy本身，设计模式中有一种典型的代理模式， proxy就是js的一种实现，它的好处在于，我可以在不污染本身对象的条件下，生成一个新的代理对象，所有的一些针对性逻辑放到代理对象上去实现，这样我可以由A对象，衍生出B,C,D…每个的处理过程都不一样，从而简化代码的复杂性，提升一定的可读性，比如用proxy实现数据库的ORM就是一种很好的应用，其实代码很简单，关键是要理解背后的思想，同时能够举一反三~
扩展： 1.Proxy.revocable()
这个方法可以返回一个可取消的代理对象const obj = {};const handler = {};const {proxy, revoke} = Proxy.revocable(obj, handler);proxy.a = 1proxy.a // 1revoke();proxy.a // Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked
一旦代理被取消了，就不能再从代理对象访问了
打印proxy 可以看到IsRevoked变为true了
2.代理对象的this问题
因为new Proxy出来的是一个新的对象，所以在如果你在target中有使用this ，被代理后的this将指向新的代理对象，而不是原来的对象，这个时候，如果有些函数是原对象独有的，就会出现this指向导致的问题，这种场景下，建议使用bind来强制绑定this
看代码：const target = new Date();const handler = {};const proxy = new Proxy(target, handler);proxy.getDate(); // Uncaught TypeError: this is not a Date object.
因为代理后的对象并不是一个Date类型的，不具有getDate方法的，所以我们需要在get的时候，绑定一下this的指向const target = new Date();const handler = {get: function(target, key){if(typeof target[key] === 'function'){return target[key].bind(target) // 强制绑定this到原对象}return Reflect.get(target, key)}};const proxy = new Proxy(target, handler);proxy.getDate(); // 6
这样就可以正常使用this啦，当然具体的使用还要看具体的场景，灵活运用吧！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章:Vue实现双向绑定的原理以及响应式数据的方法谈谈对vue响应式数据更新的误解
使用Chart.js图表库制作漂亮的响应式表单

文章插图
入门基础
Chart.js是一个基于HTML5的开源图表库，可以方便简洁的绘制美观的图表。