Proxy的使用
在说Vue3响应式前，我们先看下Proxy如何使用：
const data = {
name: '小花',
age: 3
}
const proxyData = new Proxy(data, {
// target指的是data，key为data的属性名，receiver指的是proxyData
get(target, key, receiver) {
// Reflect与Proxy一一对应，包括方法名和参数
const result = Reflect.get(target, key, receiver)
console.log('get', key);
// 返回结果
return result
},
set(target, key, val, receiver) {
const result = Reflect.set(target, key, val, receiver)
console.log('set', key, val);
console.log('result', result);
// 是否设置成功
return result
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('delete prop', key);
console.log('result', result);
// 是否删除成功
return result
}
})
proxyData.name = 'hahah'
// set name hh
// result true
// hh
console.log(proxyData.name)
// get name
// hh
delete proxyData.name
// delete prop name
// result true
如果data是数组，那么看下修改会触发什么
const data = [ 1, 2, 3]
// ...
// 数组的测试
proxyData.push('a')
// get push
// get length
// set 3 a
// result true
// set length 4
// result true
可以看到，其实我们新增内容时，是不需要get push和get length、set length 4的，所以可以对其原本的属性做下优化
// 对于 get push，可以通过判断是否为其自身属性来规避
get(target, key, receiver) {
// 只处理非原型的属性
const ownKeys = Reflect.ownKeys(target) // ["0", "1", "2", "length"]
if(ownKeys.includes(key)) {
console.log('get:', key) // 监听，只处理其自身属性
}
const result = Reflect.get(target, key, receiver)
// console.log('get', key);
// 返回结果
return result
}
// set length 4 ---- 通过判断是否是重复数据来规避
set(target, key, val, receiver) {
// 重复数据不处理
if(val === target[key]) return true;
const result = Reflect.set(target, key, val, receiver)
console.log('set', key, val);
console.log('result', result);
// 是否设置成功
return result
},
经过优化后，输出的就是已经过滤掉无用信息的了
// 数组的测试
proxyData.push('a')
// =>
// get: length
// set 3 a
// result true
Reflect的作用
-
Reflect在Proxy中的应用，是与Proxy一一对应，包括方法名和参数 - 它代表着逐渐规范化、标准化、函数式的递进思想，它将逐渐弱化一个对象
Object上的工具类的使用，使一个对象更专注于数据处理，而不是数据和工具类的混合
const obj = { x: 1, y: 2}
// 判断属性是否存在对象上
console.log('x' in obj) // true
// =>
Reflect.has(obj, 'x') // true
// 删除对象属性
delete obj.x // true
// =>
Reflect.deleteProperty(obj, 'y') // true
Object.getOwnPropertyNames(obj) // ["x", "y"]
// =>
Reflect.ownKeys(obj)
- 它只是代表一个趋势，但近期内肯定是不能取代
Object的，所以说它并不代表着Object工具类的弃用
vue3的数据响应式
介绍了proxy的基本使用，我们再来看看vue3是怎么使用proxy来实现响应式的：
- 深度监听：不再像
defineProperty一样，一次性递归响应所有属性；而是在获取get属性才对其深层属性再做响应式
// 深度对象的测试
const data = {
name: '小花',
age: 3,
info: {
city: 'shenzhen'
}
}
const proxyData = reactive(data)
console.log(proxyData.info)
// get: info
// { city: 'shenzhen' }
console.log(proxyData.info.city)
// get: info
// shenzhen
可以看到，无论是proxyData.info，还是proxyData.info.city，监听到的始终是info这个第一层属性，这明显与我们期望的不符，我们希望proxyData.info监听的是info，proxyData.info.city监听的是city，所以需要对get的返回做处理，使用reactive(result)，如果返回是一个对象，就继续给其做响应：
get(target, key, receiver) {
// 只处理非原型的属性
const ownKeys = Reflect.ownKeys(target) // ["0", "1", "2", "length"]
if(ownKeys.includes(key)) {
console.log('get:', key) // 监听，只处理其自身属性
}
const result = Reflect.get(target, key, receiver)
// 这里返回的结果，需要包一层reactive，深度监听
return reactive(result)
},
这时，再做测试
console.log(proxyData.info.city)
// get: info
// shenzhen
// =>
// get: info
// get: city
// shenzhen
- 关于
set修改，proxy无论是修改还是新增，做的操作都是一样的，所以需要人为区分哪些是新增，哪些是修改
// 未区分前，两者表现是一样的
proxyData.name = 'xx'
proxyData.name2 = 'xxx'
// set name xx
// result true
// set name2 xxx
// result true
使用Reflect.ownKeys判断修改的属性是不是原来就有的，如果有，就判断为修改；否则，则为新增
set(target, key, val, receiver) {
// 重复数据不处理
if(val === target[key]) return true;
// 区分新增和修改的属性
const ownKeys = Reflect.ownKeys(target) // ["0", "1", "2", "length"]
if(ownKeys.includes(key)) {
console.log('修改:', key, val)
}else {
console.log('新增', key, val);
}
const result = Reflect.set(target, key, val, receiver)
console.log('set', key, val);
console.log('result', result);
// 是否设置成功
return result
},
// 修改后
proxyData.name = 'xx'
proxyData.name2 = 'xxx'
// =>
// 修改: name xx
// set name xx
// result true
// 新增 name2 xxx
// set name2 xxx
// result true
-
porxy对删除属性天然支持，所以直接使用deleteProperty就可以做到，如上面例子显示的那样，不需要再额外处理
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('delete prop', key);
console.log('result', result);
// 是否删除成功
return result
}
整体代码：
function reactive(target = {}) {
// 不是对象或数组，则返回
if(typeof target !== 'object' || target === 'null') {
return target;
}
// 代理配置
const proxyConf = {
get(target, key, receiver) {
// 只处理非原型的属性
const ownKeys = Reflect.ownKeys(target) // ["0", "1", "2", "length"]
if(ownKeys.includes(key)) {
console.log('get:', key) // 监听，只处理其自身属性
}
const result = Reflect.get(target, key, receiver)
// console.log('get', key);
// 这里返回的结果，需要包一层reactive，深度监听
return reactive(result)
},
set(target, key, val, receiver) {
// 重复数据不处理
if(val === target[key]) return true;
// 区分新增和修改的属性
const ownKeys = Reflect.ownKeys(target) // ["0", "1", "2", "length"]
if(ownKeys.includes(key)) {
console.log('修改:', key, val)
}else {
console.log('新增', key, val);
}
const result = Reflect.set(target, key, val, receiver)
console.log('set', key, val);
console.log('result', result);
// 是否设置成功
return result
},
deleteProperty(target, key) {
const result = Reflect.deleteProperty(target, key)
console.log('delete prop', key);
console.log('result', result);
// 是否删除成功
return result
}
}
// 生成代理对象
const observe = new Proxy(target, proxyConf)
return observe
}
// 深度对象的测试
const data = {
name: '小花',
age: 3,
info: {
city: 'shenzhen'
}
}
const proxyData = reactive(data)
// 1. 深度监听
console.log(proxyData.info)
// get: info
// { city: 'shenzhen' }
console.log(proxyData.info.city)
// get: info
// shenzhen
// =>
// get: info
// get: city
// shenzhen
// 2. 修改，新增
proxyData.name = 'xx'
proxyData.name2 = 'xxx'
// set name xx
// result true
// set name2 xxx
// result true
// =>
// 修改: name xx
// set name xx
// result true
// 新增 name2 xxx
// set name2 xxx
// result true
总结
vue3对比vue2，优点是能规避Object.defineProperty的问题：
- 深度监听，性能更好，
vue2是一次性递归遍历所有，vue3是在set属性时，才做递归处理 - 可监听对象 新增、删除 操作
- 可监听数组变化
缺点：
兼容性不好，无法兼容所有浏览器，无法polyfill
