做网站建设的公司,沈阳哪里做网站,企业网站做百度排名要怎么做,公司起名大全文库简介#xff1a;Object.defineProperty大家都知道#xff0c;是vue2中双向数据绑定的原理#xff0c;它是 JavaScript 中一个强大且常用的方法#xff0c;用于定义对象属性#xff0c;允许我们精确地控制属性的行为#xff0c;包括读取、写入和删除等操作#xff1b;
而…简介Object.defineProperty大家都知道是vue2中双向数据绑定的原理它是 JavaScript 中一个强大且常用的方法用于定义对象属性允许我们精确地控制属性的行为包括读取、写入和删除等操作
而Proxy是vue3中双向数据绑定的原理是ES6中一种用于创建代理对象的特殊对象它允许我们拦截并自定义目标对象的操作例如属性访问、赋值、函数调用等。Proxy提供了一种机制可以在目标对象上设置拦截器从而拦截对目标对象的操作。 一、Object.defineProperty 1、Object.defineProperty是一个用于定义或修改对象属性的方法可以精确地控制属性的行为例如可写性、可枚举性和可配置性在Object.defineProperty 方法中有三个必需的参数和一个可选的第四参数。
obj (必需)要定义属性的对象。可以是任何 JavaScript 对象。 prop (必需)要定义或修改的属性的名称。可以是一个字符串表示属性的名称。descriptor (必需)一个对象用于定义或修改属性的特性。
还可以包含以下可选的属性
- configurable (可选)布尔值表示该属性是否可以被删除或修改特性。默认为 false。
- enumerable (可选)布尔值表示该属性是否可以在 for...in 循环中被枚举。默认为 false。
- value (可选)任意类型的值表示属性的初始值。默认为 undefined。
- writable (可选)布尔值表示该属性的值是否可以被修改。默认为 false。
- get (可选)函数表示获取属性值时要调用的函数。
- set (可选)函数表示设置属性值时要调用的函数。 2、基本语法多看注释 const obj { name: 小明, age: 18 }//或者const obj { }//这里不能使用constconst定义的是常量无法修改;let demoBute obj.name;//使用 Object.defineProperty 定义属性名为 name 的属性Object.defineProperty(obj, name, {//可枚举属性可以在 for...in 循环中被枚举enumerable: true,//可配置属性可以使用 delete 运算符删除属性configurable: true,//获取属性值的函数get: function () {console.log(获取收集依赖);return demoBute},//设置属性值的函数set: function (value) {console.log(更新通知用户);demoBute value;}})//修改触发set函数obj.name 小红//控制台输出更新通知用户//调用出发get函数console.log(obj.name);//控制台输出获取收集依赖//小明//多次调用看下运行顺序按照调用顺序依次执行(set get log)//只要调用obj都会触发依赖函数obj.name 小红; //set console.log(obj.name); //get log//控制台输出: //更新通知用户//获取收集依赖//小红3、get和set get 函数的作用是在访问属性值时被调用它不接受任何参数但需要返回属性的值。在示例中我们通过return demoBute返回了name的属性值 。 set 函数的作用是在设置属性值时被调用它接受一个参数 value该参数表示要设置的属性值。在示例中我们直接把修改后的值value 赋值给demoBute实现更新。 4、注意事项
get 和set 函数不会同时被触发它们根据属性的读取或设置操作来决定调用哪个函数该方法按照调用顺序从上到下依次执行就是有更新就只运行set函数没更新就只运行get函数。 二、Proxy 1、Proxy方法是一个允许您拦截并自定义对象的底层操作。通过使用Proxy您可以拦截对象的各种操作如属性访问、属性赋值、函数调用等并在这些操作发生时执行自定义行为在Proxy中target 是您要代理的目标对象 handler 是一个包含各种拦截操作的对象。 handler 对象中的每个属性都是一个特殊的拦截器用于拦截不同的操作。 2、基本语法
const target {...... }const handler {get(target, property, receiver){//拦截属性的读取操作},set(target, property, value, receiver){//拦截属性}
}const proxy new Proxy(target, handler); 3、在ES6的Proxy中get和set是两个常用的拦截器函数用于拦截对象属性的读取和赋值操作。下面详细介绍这两个函数的用法和功能
1、get(target , property , receiver)
- target 目标对象即被代理的对象。
- property 要访问的属性名。
- receiver最初被调用的对象通常是代理对象或继承代理对象的对象。 - 返回值返回属性的值。
get 函数在访问目标对象的属性时触发可以用来拦截属性的读取操作。您可以在 get 函数内部添加自定义的逻辑例如记录日志、验证访问权限等。下面是一个示例
const target {name: Bob,age: 18
};
const handler {get(target, property, receiver) {console.log(正在读取属性${property});return target[property];}
};
const proxy new Proxy(target, handler);
console.log(proxy.name); // 输出正在读取属性nameBob
console.log(proxy.age); // 输出正在读取属性age18
这里我们创建了一个代理对象 proxy 当访问 proxy 的属性时 get 函数会被触发并打印相应的日志信息。
2、set(target , property , value , receiver)
- target 目标对象即被代理的对象。
- property 要设置的属性名。
- value 要设置的属性值。
- receiver最初被调用的对象通常是代理对象或继承代理对象的对象。 - 返回值返回一个布尔值表示属性是否设置成功。
set 函数在给目标对象的属性赋值时触发可以用来拦截属性的赋值操作。您可以在 set 函数内部添加自定义的逻辑例如验证赋值的合法性、记录日志等。下面是一个示例
const target {name: Carl,age: 20
};
const handler {set(target, property, value, receiver) {console.log(正在设置属性${property}新值为${value});target[property] value;return true;}
};
const proxy new Proxy(target, handler);
proxy.age 30; // 输出正在设置属性age新值为30
console.log(proxy.age); // 输出30
在这里我们给proxy的age属性赋值时set函数会被触发并打印相应的日志信息通过get 和 set 拦截器函数您可以在读取和赋值属性时执行自定义的行为从而实现更灵活和可控的对象操作。
3、get和set完整实例
const target {name: Alice,age: 25
};const handler {get(target, property, receiver) {console.log(正在读取属性${property});return target[property];},set(target, property, value, receiver) {console.log(正在设置属性${property}新值为${value});target[property] value;return true;}
};const proxy new Proxy(target, handler);console.log(proxy.name); // 输出正在读取属性nameAlice
proxy.age 30; // 输出正在设置属性age新值为30
console.log(proxy.age); // 输出正在读取属性age30 4、handler对象中的其它参数 get(target, property, receiver)拦截属性的读取操作。 set(target, property, value, receiver)拦截属性的赋值操作。 apply(target, thisArg, argumentsList)拦截函数的调用操作。 has(target, property)拦截in操作符的操作。 deleteProperty(target, property)拦截属性的删除操作 ......
