vue3.0为何使用proxy实现双向绑定，有哪些优点

程序员良仔

已于 2022-05-31 17:03:26 修改

阅读量5.4k

点赞数 9

分类专栏： js深入解析文章标签： javascript es6 vue.js

于 2021-01-29 16:04:24 首次发布

本文链接：https://blog.csdn.net/weixin_44246717/article/details/113097264

版权

js深入解析专栏收录该内容

7 篇文章 2 订阅

订阅专栏

前言

随着vue3.0bate发布，我们知道双向绑定的实现方法，从vue2.0的es5的访问器属性Object.defineProperty改为es6的proxy，同学们就会想，为何改用proxy，proxy又有哪些优势呢，本文就是解答有这些疑惑的同学，希望能帮助到你

1、proxy对比Object.defineProperty

Proxy 的优势如下:

1、Proxy 可以直接监听对象而非属性；
2、Proxy 可以直接监听数组的变化；
3、Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的；
4、Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；
5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

1、兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

2、proxy监听对象的简单实现

代理对象简单实现

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

补充知识点：Reflect

Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API
我们需要在 handler.set() 中 return 一个 Reflect.set(…arguments) 来进行赋值给目标对象。

Reflect.set
Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

Reflect.get
Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。

handler.set()方法

属性设置操作的捕捉器。

// 定义一个对象
let data = {
  name: '阿良',
  age: '23',
}
// 创建一个 Proxy , 将 data 作为目标对象
let p = new Proxy(data, {
  // target = 目标对象
  // prop = 设置的属性
  // value = 修改后的值
  set(target, prop, value) {
    console.log(target, prop, value) // { name: '阿良', age: '24' } 'age' 18
    // 用Reflect修改赋值
    return Reflect.set(...arguments)
  },
})
// 直接修改p就可以了
p.age = 18
console.log(data) // { name: '阿良', age: '18' }

handler.get()

属性读取操作的捕捉器。

let data = {
  name: '阿良',
  age: '24',
}

let p = new Proxy(data, {
  // target = 目标对象
  // prop = 获取的属性
  get(target, prop) {
    console.log(target, prop) // { name: '阿良', age: '24' } 'age'
    // 这里的 Reflect.get 我们在上面已经讲到了
    return Reflect.get(...arguments)
  },
})
console.log(p.age) // 24

3、Object.defineProperty监听对象的简单实现

var o = {} // 创建一个新对象
// 在对象中添加一个设置了存取描述符属性的示例
var bValue = 38
Object.defineProperty(o, 'bValue', {
  get() {
    return bValue
  },
  set(newValue) {
    console.log('set==>', newValue)
    bValue = newValue
  },
})
// 进入访问器代理的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