小装修网站开发费用,免费网站建设排行表,小程序云开发教程,上海网站建设公司联系方式我们在Vue2中使用的是Object.defineProperty方法来实现数据响应式的#xff0c;可以通过get和set方法来监听对象的访问和修改。
但是并不能响应对象中属性的增加和删除#xff0c;只能使用Vue.$set 和Vue.$delete 来对对象中的属性进行增加和删除。
数组也不能直接通过下标…我们在Vue2中使用的是Object.defineProperty方法来实现数据响应式的可以通过get和set方法来监听对象的访问和修改。
但是并不能响应对象中属性的增加和删除只能使用Vue.$set 和Vue.$delete 来对对象中的属性进行增加和删除。
数组也不能直接通过下标来对数组进行修改只能使用Vue封装过的数组方法来实现数组的响应式。
以上问题在Vue3中就不会存在因为其使用的是Proxy代理。 一、Proxy
Proxy和Object.defineProperty的作用类似不过在使用上更加便捷。 一创建Proxy代理
如果我们先想要创建一个Proxy代理就需要使用new 关键字 let 代理对象 new Proxy(源对象, { // 配置项 }) 如我们对Person对象进行Proxy代理
let person {name:张三,age:18
}let P new Proxy(person, {});
代理完成后我们在P中修改name属性person的属性也会被修改这就完成了数据代理。 二Proxy配置项
以上我们只是实现了代理但是还没有实现响应式无法捕获到数据的增删改查。
我们只需要添加配置项即可 读取数据get (target, prop) { // 响应 } 修改和添加数据set (target, prop, value) { // 响应 } 删除数据deleteProperty (target, prop) { // 响应 } let P new Proxy(person, {// 读取属性get(target, prop) {console.log(读取了P的${prop}属性);},// 修改和增加属性set(target, prop, value) {console.log(修改或新增了P的${prop}属性值为${value});},// 删除属性deleteProperty(target, prop) {console.log(删除了P的${prop}属性);}
});
现在我们对代理对象进行属性的增删改查都会触发响应式。 还没完代理对象中的数据变化了但是还没引起源对象的变化我们将上面的代码完善一下即可
let P new Proxy(person, {// 读取属性get(target, prop) {return target[prop];},// 修改和增加属性set(target, prop, value) {target[prop] value;},// 删除属性deleteProperty(target, prop) {return delete target[prop]}
});
这下我们就能完成响应式了。 二、Reflect reflect的作用就是对源对象中的属性进行操作。 读取数据Reflect.get (源对象, 属性名) 修改或新增数据Reflect.get (源对象, 属性名, 属性值) 删除属性Reflect.deleteProperty (源对象, 属性名) 所以我们就可以将上面的代码改为如下代码
let P new Proxy(person, {// 读取属性get(target, prop) {return Reflect.get(target, prop);},// 修改和增加属性set(target, prop, value) {return Reflect.set(target, prop, value);},// 删除属性deleteProperty(target, prop) {return Reflect.deleteProperty(target, prop);}
}); Vue3的源码底层实现就是使用的Proxy Reflect 实现的。
使用Reflect主要是能够方便代码进行书写使用Reflect 即使是语法错误都会继续执行不需要使用繁琐的try catch 捕获后继续执行。
