vue2 vue3代理方式重新学习

山人在山上

已于 2022-11-08 14:27:06 修改

阅读量253

点赞数

文章标签：前端 javascript 开发语言

于 2022-11-08 14:10:14 首次发布

本文链接：https://blog.youkuaiyun.com/dalaijianfen/article/details/127749730

版权

本文对比了Vue2使用Object.defineProperty实现响应式的机制与Vue3采用Proxy的改进方式。介绍了两种方法的具体实现细节，并解释了为什么Vue3选择Proxy作为其核心机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2 defineProperty
// 对象中每一个属性都要这么写一遍，可以用循环的方式实现 Object.keys()
Object.defineProperty(target,property,{
  configurable:true, //监听删除和新增属性
  get(){
    return target.property
  },
  set(value){
    target.property = value;
  }
})

vue3 proxy 
//原始写法
let p = Proxy(persion,{
  get(target,property){
    return target[property]
  },
  // 修改属性或添加属性都会调用
  set(target,property,propertyValue){
    target[property] = propertyValue
  },
  deleteProperty(target,property){
    return delete target[property]
  },
})
//vue 扩展写法 Reflect
let p = Proxy(persion,{
  get(target,property){
    return Reflect.get(target,property)
  },
  // 修改属性或添加属性都会调用
  set(target,property,propertyValue){
    Reflect.set(target,property,propertyValue)
  },
  deleteProperty(target,property){
    returnReflect.deleteProperty(target,property)
  },
})

Reflect符合未来规范，因为正在将Object上的方法，逐步迁移到Reflect