一、proxy对比Object.defineProperty的优点proxy的优点: - Proxy 可以直接监听对象而非属性;
- Proxy 可以直接监听数组的变化;
- Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的;
- Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;
- Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;
Object.defineProperty 的优势: 兼容性好:支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
二、、proxy监听对象的简单实现
1.代理对象简单实现```javascriptlet data = {};// 定义一个空对象let proxy = new Proxy(data, {});// 创建一个 Proxy , 将 data 作为目标对象// 修改Proxy 代理对象的name属性proxy.name = 'shelley';console.log(proxy); console.log(data)// { name: 'shelley' }// { name: 'shelley' }```
2.补充知识 ReflectReflect 对象与Proxy对象一样,也是 ES6 为了操作对象而提供的新 API
我们需要在 handler.set() 中 return 一个 Reflect.set(…arguments ) 来进行赋值给目标对象。 - Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数,则赋值函数的this绑定receiver。
- Reflect.get方法查找并返回target对象的name属性,如果没有该属性,则返回undefined。
3.proxy方法handler.set()方法 属性设置操作的捕捉器。 ```javascriptlet data = { name: 'shelley', age: '27'};let p = new Proxy(data, { set(target, prop, value) { // target = 目标对象 // prop = 设置的属性 // value = 修改后的值 console.log(target, prop, value); // { name: 'shelley', age: '27' } age 18 return Reflect.set(...arguments); }})p.age = 18;console.log(data); // { name: 'shelley', age: 18 }``` - handler.get() 属性读取操作的捕捉器。 ```javascriptlet data = { name: 'shelley', age: 22};let p = new Proxy(data, { get(target, prop){ console.log(target, prop);//{ name: 'shelley', age: 22 } age return Reflect.get(...arguments); }})console.log(p.age);//22``` Object.defineProperty监听对象的简单实现 ```javascriptvar o = {};// 创建一个新对象var bValue = 39;// 在对象中添加一个设置了存取描述符属性的示例Object.defineProperty(o, 'bValue', { // 这代码不会设置 o 的属性,只有访问的时候才会 get() { return bValue; }, set(newValue) { console.log('set==>', newValue); bValue = newValue; }});console.log(o) // {}// 进入访问器代理的bValue属性的get方法,返回,并设置o对象里的bValue的值为38console.log(o.bValue); // 38// 进入访问器代理的bValue属性的set方法,设置bValue的新值,// 再进入get返回,并设置o对象里的bValue的值为40o.bValue = 40;console.log(o.bValue) // 40``` 小结:
- es6 proxy代理器对比
es5 Object.defineProperty ,功能更加强大,提供了方法超多,甚至可以代理方法 - 为什么vue3.0才使用es6的proxy,未在2.0就使用;因为es6在部分浏览器中并未兼容,如ie的低版本,所以在**大部分主流浏览器都兼容**的情况下,才使用
三、手写vue3.0双向绑定-es6 Proxy
1、什么是Proxy - Proxy取其英文意思即“代理”。所谓代理,是你要取得某样东西或对其进行某些操作的中间媒介,而不是直接作用在这个对象上。
- Proxy可以理解成在目标对象前架设一层拦截层,外界访问该对象都必须先通过这层拦截,因此提供一种机制可以对外界的访问进行拦截或过滤。
2、vue.js中使用双向绑定
```javascript<div id="app"> <h2>{{msg}}</h2> <input type="text" v-model="msg"/></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> let vm = new Vue({ el: '#app', data: { msg: 'shelley'},})</script>```
四、Proxy对比Object.definePropertyVue2.0中的双向绑定,使用Object.defineProperty()进行双向绑定 缺点: - 无法对数组进行监听,采用的是对数组的方法进行重写(push, pop,shift,unshift等等)。对此进行双向绑定和数据监听的操作
- 效率差,这主要是因为对多层数据进行一次性的递归操作,如果数据很多或者是很深层次,这样性能非常的差
- 因为局限性,无法对新加/删除的数据进行监听,所以使用在vue2.0中使用$set进行手动添加
- Object.definePorperty()递归遍历所有对象的所有属性,当数据层级较深时,会造成性能影响。 - Object.definePorperty()只能作用在对象上,不能作用在数组上。 - Object.definePorperty()只能监听定义时的属性,不能监听新增属性。 - 由于Object.definePorperty()不能作用于数组,vue2.0选择通过重写数组方法原型的方式对数组数据进行监听,但是仍然无法监听数组索引的变化和长度的变更 Vue3.0中双向绑定,使用Proxy和Reflect进行双向绑定 优点: 缺点: 解决办法: - ①使用类似于
debounce 的操作,对其进行优化,使其值响应一次 - ②(vue3.0中的解决方式),判断key是否是target的自身属性,以及value是否和target[key]相等,可以避免多余的set/get操作
Proxy只能代理一层,无法深度监听 - ①使用深度递归,对每一层进行监听。巧妙的使用的Reflect.get()会返回对象内层结构的特性(下一层),判断下一层是否还是对象,并且使用深度递归操作。但是在性能上又很大的影响
- ②使用weakMap,使用两个weakMap来保存原始数据和可响应数据。访问数据时会从保存的数据中查找,如果没有再对其进行Proxy操作。
到此这篇关于proxy实现vue3数据双向绑定原理的文章就介绍到这了,更多相关proxy实现vue3数据双向绑定 内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net! 下载地址: 深入了解javascript原型和原型链 17个JavaScript |