美文网首页
vue3.0为什么要用Proxy对象

vue3.0为什么要用Proxy对象

作者: 忍不住的k | 来源:发表于2020-04-29 23:17 被阅读0次
Object.defineProperty,定义响应式的伪代码:
function defineProperty(target,key,value){
  const dep = new Dep()
Object.defineProperty(target,key,{
get(){
 if (Dep.target){
//依赖收集
 dep.depend()
}
return value
},
set(newVal){
value=newVal
...
//通知更新
//dep.notify()
}

})
}

缺点:

  1. 无法检测到对象属性的新增或删除
    由于js的动态性,可以为对象追加新的属性或者删除其中某个属性,这点对经过Object.defineProperty方法建立的响应式对象来说,只能追踪对象已有数据是否被修改,无法追踪新增属性和删除属性,这就需要额外的代码处理。
  2. 数组变化监听
    vue2.x是通过代理数组原型,包装了一层数组的变异方法:'pop','shift','unshift','sort','reverse','splice', 'push'
  3. get set 拦截器不能直接操作target对象
Proxy对象
var proxy = new Proxy(obj, handler)

obj是要代理的对象,handler是定制拦截操作,返回一个代理对象
特点:
Proxy代理是针对整个对象,不是针对对象属性做拦截

劣势:

  1. 性能比promise还差
  2. 兼容性不太乐观 ,无法完全polyfill
    当然,Proxy也不是没有坑,尤其要注意代理对象方法的this指向问题;

相关文章

  • vue3.0为什么要用Proxy对象

    Object.defineProperty,定义响应式的伪代码: 缺点: 无法检测到对象属性的新增或删除由于js的...

  • ES6的proxy记录

    vue3.0要用proxy来改写取代之前的defineProperty,稍微来记录下Proxy 可以理解成,在目标...

  • Vue3.0 放弃 Object.defineProperty

    想必大家都知道Vue3.0 把数据对象侦测的API 从Object.defineProperty 换成 proxy...

  • TypeScript在Vue3.0的Ref类型中的实践

    一、Ref的定义 vue3.0中的响应式原理是基于proxy做的,而使用proxy的前提是,我们要代理的是对象而不...

  • Vue3.0 toRaw函数和markRaw函数

    Vue3.0给我们提供的这两个方法,toRaw方法是把被reactive或readonly后的Proxy对象转换为...

  • Vue3.0里为什么要用 Proxy API 替代 define

    一、Object.defineProperty 定义:Object.defineProperty() 方法会直接在...

  • Vue3.0 API的使用

    Vue3.0 整体优势 proxy数据劫持代替object.defineProperty(特点:可以监听数组变化,...

  • Proxy 对象学习

    1、Proxy 对象到底是什么? Proxy 对象到底是什么呢?Proxy 的意思是 代理,proxy对象的作用是...

  • 6道面试题

    Proxy 在2020年来看Proxy早已经不是一个陌生的词了,他能做的是有很多,尤其在Vue3.0通过Proxy...

  • vue3.0 proxy

    vue3 中的 proxyAPI Proxy的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作。 Pr...

网友评论

      本文标题:vue3.0为什么要用Proxy对象

      本文链接:https://www.haomeiwen.com/subject/cujuwhtx.html