©2020-2024 ioDraw All rights reserved
vue3.0 数据响应式原理的实现： 1: 实现原理: 通过(Proxy)代理实现: 拦截对象中任意属性的变化, 包括属性值的读写, 属性的添加,
属性的删除等操作。 2: 通过(Reflect)(反射); 被代理的对象, 属性进行操作。 MDN 文档中描述的Proxy 与Reflect: new
Proxy(data, { // 拦截读取属性值 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, value); } }) vue3.0 中不存在vue2.0 中说的这些问题 在一个对象中新增,
删除, 修改属性, 界面不会自动更新。 直接通过下标修改数组, 界面不会自动更新。 vue2.0 中实现数据响应式原理: let person { name:
"李明", age: 18 } // 模拟vue2.0 中实现响应式 let p = {}; Object.defineProperty(p, 'name',
{ get() { // 有人读取name 属性调用 return person.name }, set(value) { // 有人修改name 属性是调用
person.name = value } }) Object.defineProperty(p, 'age', { get() { // 有人读取name
属性调用 return person.age }, set(value) { // 有人修改name 属性是调用 person.age= value } })
Object.defindProperty(person, 'sex', { value："男", // 设置值 emnumable: true, //
可枚举的, 默认值为false writeable: true, // 可以被修改的, 默认值为false }) vue3.0 中proxy 就是代理的含义:
window 全局身上有一个proxy 代理对象: const p = new proxy(person, {}), // 配置对象
对属性进行增删改查的操作proxy 都可以捕获到。 vue3.0 实现响应式的模拟: const p = new proxy(person, { //
有人读取p 身上的某个属性 get(target, propName) { console.log(`有人读取了p身上的${propName}属性`,
更新界面); return target[propName]; return 出去一个返回值 }, // 给p对象身上增加/ 修改某个属性时调用
set(target, propName, value) { console.log(`有人修改/增加了p身上的${propName}属性`, 更新界面);
target[propName] = value; }, deleteproperty(target, propName) {
console.log(`有人删除了p身上的${propName}属性`, 更新界面); return delete target[propName]; //
删除一个属性 } }) proxy 可以实现数据的增删改查 从对象中读取一个属性: 使用window 全局身上有一个Reflect(反射) let
object = { a: 1, b: 2 } 第一种: object.a = 1; 第二种: 使用window 全局身上有一个Reflect(反射)
Reflect.get(object, a); 第一个参数要读取的对象, 第二个参数要读取对象的属性值 修改对象身上的某一个属性: 可以使用:
object.a = 666; 直接拿到属性值进行修改。 第二种方法: object.set(obj, 'a', 666); // 第一个要修改的对象,
第二个参数要修改的属性名, 第 三个参数就是要修改的值。 删除对象中某个属性: let object = { name: "李明", age: 18 //
年龄 } 删除对象某个属性, 使用delete 方法: delete.object.name 删除object 对象中name 属性。
Reflect.deleteProperty(object, a) 使用Reflect(反射) deleteProperty 删除对象身上属性。
对一个属性的基本操作, 体现不出来Reflect 的威力: Reflect 身上也有definedProperty() 属性：
Reflect.defineProperty() 身上是有返回值的。 返回值是布尔值 Reflect 的使用在框架封装使用上好处: Reflect
是一个内置对象, 它提供了可以拦截javaScript 操作方法。 方法与代理处理程序相同。 Reflect 不是一个对象, 因此它是不可以new 的，
不可以当做构造函数使用。 new Reflect() //错误的写法 Reflect提供了一些静态方法, 静态方法是指只能通过对象自身访问的的方法。
1、Reflect.apply() 2、Reflect.construct() 3、Reflect.defineProperty()
4、Reflect.deleteProperty() 5、Reflect.enumerate() 6、Reflect.get()
7、Reflect.getOwnPropertyDescriptor() 8、Reflect.getPrototypeOf() 9、Reflect.has()
10、Reflect.isExtensible() 11、Reflect.ownKeys() 12、Reflect.preventExtensions()
13、Reflect.set() 14、Reflect.setPrototypeOf() 静态方法的使用: Reflect.get() 方法:
Rlflect.get() 获取目标对象指定的key的value. let object = { a：1, } let s1 =
Reflect.get(obj, "a"); console.log(s1) ===>获取指定对象的属性名 vue3.0 实现响应式的实现: const p
= new proxy(person, { // 有人读取p 身上的某个属性 get(target, propName) {
console.log(`有人读取了p身上的${propName}属性`, 更新界面); return Reflect.get(target,
propName) return 出去一个返回值 }, // 给p对象身上增加/ 修改某个属性时调用 set(target, propName, value)
{ console.log(`有人修改/增加了p身上的${propName}属性`, 更新界面); Reflect.set(target, propName,
value) }, deleteproperty(target, propName) {
console.log(`有人删除了p身上的${propName}属性`, 更新界面); return
Reflect.deleteProperty(target, value) // 删除一个属性 } }) Proxy: 用到的是一个代理对象,
Reflect: 反射对象 (对立的一面)