proxy实现vue3数据双向绑定

时间:2022-05-23 shelleyHLX 人气:0

一、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.代理对象简单实现

```javascript
let data = {};// 定义一个空对象
let proxy = new Proxy(data, {});// 创建一个 Proxy , 将 data 作为目标对象
// 修改Proxy 代理对象的name属性
proxy.name = 'shelley';
console.log(proxy); 
console.log(data)
// { name: 'shelley' }
// { name: 'shelley' }

```

2.补充知识 Reflect

Reflect对象与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()方法属性设置操作的捕捉器。

```javascript
let 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() 属性读取操作的捕捉器。

```javascript
let 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监听对象的简单实现

```javascript
var 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的值为38
console.log(o.bValue); // 38
// 进入访问器代理的bValue属性的set方法，设置bValue的新值，
// 再进入get返回，并设置o对象里的bValue的值为40
o.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.defineProperty

Vue2.0中的双向绑定，使用Object.defineProperty()进行双向绑定

缺点：

无法对数组进行监听，采用的是对数组的方法进行重写（push, pop,shift,unshift等等）。对此进行双向绑定和数据监听的操作
效率差，这主要是因为对多层数据进行一次性的递归操作，如果数据很多或者是很深层次，这样性能非常的差
因为局限性，无法对新加/删除的数据进行监听，所以使用在vue2.0中使用$set进行手动添加

- Object.definePorperty()递归遍历所有对象的所有属性，当数据层级较深时，会造成性能影响。

- Object.definePorperty()只能作用在对象上，不能作用在数组上。

- Object.definePorperty()只能监听定义时的属性，不能监听新增属性。

- 由于Object.definePorperty()不能作用于数组，vue2.0选择通过重写数组方法原型的方式对数组数据进行监听，但是仍然无法监听数组索引的变化和长度的变更

Vue3.0中双向绑定，使用Proxy和Reflect进行双向绑定

优点：

Proxy可以对数组和对象进行拦截和监听

缺点：

Proxy会出发多次set/get响应

解决办法：

①使用类似于debounce的操作，对其进行优化，使其值响应一次
②（vue3.0中的解决方式），判断key是否是target的自身属性，以及value是否和target[key]相等，可以避免多余的set/get操作

Proxy只能代理一层，无法深度监听

①使用深度递归，对每一层进行监听。巧妙的使用的Reflect.get()会返回对象内层结构的特性（下一层），判断下一层是否还是对象，并且使用深度递归操作。但是在性能上又很大的影响
②使用weakMap，使用两个weakMap来保存原始数据和可响应数据。访问数据时会从保存的数据中查找，如果没有再对其进行Proxy操作。

加载全部内容