Vue3 升级内容
全部使用ts重写(响应式、vdom、模板编译)
性能提升,代码量减少(打包出来的内容代码量少)
会调整部分API
Object.defineProperty的缺点
深度监听需要一次性递归
无法监听新增属性/删除属性 (Vue.set Vue.delete)
无法原生监听数组,需要特殊处理
Proxy基本应用
Reflect作用
和 Proxy 能力 一一对应
规范化、标准化、函数式
代替Object上的工具函数
proxy完成响应式
function reactive(target = {}) {
// 不是对象、数组直接返回
if(typeof target !== 'object' || target == null) {
return target
}
const proxyConfig = {
get(target, key, receiver){
const ownKeys = Reflect.ownKeys(target)
if (ownKeys.includes(key)) {
console.log('get', key)
}
const result = Reflect.get(target, key, receiver)
/* 深度监听修改1
return result
*/
/*
性能提升:在get时去递归,去深度监听
而 defineProperty 是开始时就递归完成
*/
return reactive(result)
},
set(target, key, val, receiver){
if(val === target[key]){return true}
/* 可监听到新增的key */
const ownKeys = Reflect.ownKeys(target)
if(ownKeys.includes(key)){
// 已有的可以
}else{
// 新增的key
console.log('新增的key')
}
const result = Reflect.set(target, key, val, receiver)
console.log('set', key, val)
return result
},
deleteProperty(target, key){
const result = Relect.deleteProperty(target, key)
console.log('delete property', key)
return result
}
}
// 生成代理对象
const observed = new Proxy(target, proxyConfig)
return observed
}
// 测试数据
const data = {
name: 'zwx',
age: '25',
info: {
city: 'beijing',
a: {
b: {
c: 1
}
}
}
}
//
let newdata = reactive(data)
newdata.info.city // get info 不是 get city
newdata.info.a // b 和之后还没加入响应式
newdata.info.a.b.zzz = 88
深度监听,性能更好
可监听 新增/删除属性
可监听数组变化
proxy能规避defineProperty缺点
proxy无法兼容全部浏览器,无法polyfill