object.defineProperty和proxy

1、object.defineProperty()

作用

在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象

基本使用

语法：Object.defineProperty(obj, prop, descriptor)

参数：

要添加属性的对象
要定义或修改的属性的名称或 [Symbol]
要定义或修改的属性描述符

监听对象单个属性

let person = {}
let personName = 'lihua'
//在person对象上添加属性name,值为personName
Object.defineProperty(person, 'name', {//但是默认是不可枚举的(for in打印打印不出来)，可：enumerable: true//默认不可以修改，可：wirtable：true//默认不可以删除，可：configurable：trueget: function () {return personName},set: function (val) {return name=val}
})
//当读取person对象的name属性时，触发get方法
console.log(person.name)
//当修改person对象的name属性时，触发set方法
personName = 'liming'
//检查后发现，修改成功了
console.log(person.name)

通过这种方法，我们成功监听了person上的name属性的变化。

监听对象上的多个属性

let person = {name: '',age: 0
}
// 实现一个响应式函数
function defineProperty(obj, key, val) {Object.defineProperty(obj, key, {get() {console.log(`访问了${key}属性`)return val},set(newVal) {console.log(`${key}属性被修改为${newVal}了`)val = newVal}})
}
// 实现一个遍历函数Observer
function Observer(obj) {Object.keys(obj).forEach((key) => {defineProperty(obj, key, obj[key])})
}
Observer(person)
console.log(person.age)
person.age = 18
console.log(person.age)

深度监听一个对象

Obsever就是我们想要实现的监听函数，我们预期的目标是:只要把对象传入其中，就可以实现对这个对象的属性监视，即使该对象的属性也是一个对象。我们在defineProperty()函数中，添加一个递归的情况：

function defineProperty(obj, key, val) {//如果某对象的属性也是一个对象，递归进入该对象，进行监听observer(key)Object.defineProperty(obj, key, {get() {console.log(`访问了${key}属性`)return val},set(newVal) {console.log(`${key}属性被修改为${newVal}了`)val = newVal}})
}

当然啦，我们也要在observer里面加一个递归停止的条件:

function Observer(obj) {//如果传入的不是一个对象，returnif (typeof obj !== "object" || obj === null) {return}// for (key in obj) {Object.keys(obj).forEach((key) => {defineProperty(obj, key, obj[key])})// }}

还有一个小问题，如果对某属性进行修改时，如果原本的属性值是一个字符串，但是我们重新赋值了一个对象，我们要如何监听新添加的对象的所有属性呢？其实也很简单，只需要修改set函数：

set(newVal) {// 如果newVal是一个对象，递归进入该对象进行监听observer(newVal)console.log(`${key}属性被修改为${newVal}了`)val = newVal}

监听数组

let arr = [1, 2, 3]
let obj = {}
//把arr作为obj的属性监听
Object.defineProperty(obj, 'arr', {get() {console.log('get arr')return arr},set(newVal) {console.log('set', newVal)arr = newVal}
})
console.log(obj.arr)//输出get arr [1,2,3]  正常
obj.arr = [1, 2, 3, 4] //输出set [1,2,3,4] 正常
obj.arr.push(3) //输出get arr 不正常，监听不到push

通过push方法给数组增加的元素，set方法是监听不到的

事实上，通过索引访问或者修改数组中已经存在的元素，是可以出发get和set的，但是对于通过push、unshift增加的元素，会增加一个索引，这种情况需要手动初始化，新增加的元素才能被监听到。另外，通过 pop 或 shift 删除元素，会删除并更新索引，也会触发 setter 和 getter 方法。

2、proxy

取代了 Vue2 中的 Object.defineProperty() 机制，用于实现数据响应式

什么是代理？

代理（Proxy）是 ES6 中新增的一个特性，它可以用来自定义对象中的操作。代理是一个对象，它可以拦截并重定义基本操作，如属性查找、赋值、枚举、函数调用等。代理对象可以用来创建一个对象的代理，并且可以拦截对该对象的所有操作。

代理在 Vue3 中的应用

在 Vue3 中，代理机制用于实现数据的响应式。当我们创建一个 Vue 实例时，Vue3 会使用代理机制拦截对数据对象的访问和修改，从而实现数据的响应式。具体来说，Vue3 会创建一个代理对象，将数据对象包裹在其中，并拦截对数据对象的所有操作。当我们访问或修改数据对象中的属性时，实际上是在访问或修改代理对象中的属性，代理对象会拦截这些操作，并执行相应的处理，从而实现数据的响应式。

代理机制的原理

代理机制的原理是通过拦截对象中的操作，并执行自定义的处理来实现的。在 Vue3 中，代理机制用于拦截对数据对象的访问和修改。具体来说，Vue3 会创建一个代理对象，将数据对象包裹在其中，并拦截对数据对象的所有操作。当我们访问或修改数据对象中的属性时，实际上是在访问或修改代理对象中的属性，代理对象会拦截这些操作，并执行相应的处理，从而实现数据的响应式。

代理机制的拦截操作主要包括以下几种：

get：拦截对象属性的读取操作。
set：拦截对象属性的赋值操作。
deleteProperty：拦截对象属性的删除操作。
has：拦截 in 操作符的判断操作。
ownKeys：拦截 Object.keys()、Object.getOwnPropertyNames() 等操作。
apply：拦截函数的调用操作。
construct：拦截 new 操作符的调用操作。

在 Vue3 中，代理机制主要使用 get 和 set 两种拦截操作，用于拦截对数据对象的访问和修改。具体来说，当我们访问一个数据对象中的属性时，代理对象会拦截这个操作，并执行 get 拦截操作，从而获取该属性的值。当我们修改一个数据对象中的属性时，代理对象会拦截这个操作，并执行 set 拦截操作，从而修改该属性的值。在 get 和 set 拦截操作中，代理对象会执行相应的处理，从而实现数据的响应式。

使用Proxy+Reflect实现代理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>测试Reflect和Proxy</title></head><body><script>// 创建一个处理程序对象const handler = {// 拦截目标对象的属性读取操作get(target, prop, receiver) {console.log(`访问了${prop}属性`);// 使用Reflect.get执行目标对象的属性读取操作return Reflect.get(target, prop, receiver);},// 拦截目标对象的属性设置操作set(target, prop, value, receiver) {console.log(`设置了${prop}属性`);// 使用Reflect.set执行目标对象的属性设置操作return Reflect.set(target, prop, value, receiver);},};// 创建一个目标对象const target = {name: "Alice",age: 20,};// 创建一个代理对象const proxy = new Proxy(target, handler);// 使用代理对象执行各种操作console.log(proxy.name); // 访问了name属性，输出Aliceproxy.age = 21; // 设置了age属性console.log(proxy.age); // 访问了age属性，输出21</script></body>
</html>

3、proxy优势

相比于 Vue2 中的 Object.defineProperty() 机制，代理机制有以下优势：

（1）代理机制可以拦截所有类型的操作，包括属性查找、赋值、枚举、函数调用等，而 Object.defineProperty() 机制只能拦截属性赋值和查找操作。
（2）代理机制可以直接监测对象的属性，而 Object.defineProperty() 机制需要遍历对象的所有属性，并为每个属性添加 getter 和 setter，这在对象属性较多时会影响性能。
（3）代理机制可以监测到对象新增和删除的属性，而 Object.defineProperty() 机制无法监测到这些操作。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/19674.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！