Vue3 的Proxy

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

 

关注作者和知识库后续更新