基础-proxy与defineProperty的区别?

一个是vue3的响应式原理,一个是vue2的,那两者的实质性区别到底是什么?

看看proxyMDN 上是怎么说的哈。

来咯,分析一下这个 which引导的主语从句。这个proxy对象能让你为另一个对象创建代理,可以拦截和重新定义那个对象的基本操作 。大致就这样了啊😌。

好了回到js来,那什么又是对象的基本操作呢?赋值?读取属性?删除属性?遍历?啊这些都是在语法层面上的操作。这其实是js这门语言为了让开发者使用起来更加方便或者是让程序的可读性更好,搞出来的一种独特的语法(其实可以这样理解啊🤓🤓),那实际上,我们在使用语法的时候,在真正执行这些代码的时候,会转换为一个函数。

js 复制代码
obj.a; // 【GET】
obj.b = 3; //【SET】
delete obj.a;//【DELETE】

例如在读取对象属性的时候,运行的函数是GET。这些内部运行的方法就是它的基本操作

打开 ecma 262文档看看对象的内部方法。

有一个方法Object.defineProperty,其实在就是这个函数,也是就是对象的属性了,那其实内部执行的就是DefineOwnProperty这个方法,你看接收的参数都一样。

来看看proxy,它有一堆的内部方法,每一个方法都对应一个捕获器也可以叫做陷阱,这就对上了啊,用这个陷阱去拦截,然后你就掉进去了。所有的陷阱都是可选的,如果没有定义对应的陷阱,那就会保留源对象的默认行为。

js 复制代码
 const obj = {
    b: 40,
  };
  const handler = {
    get: function (target, prop) {
      console.log("prop", prop);
      return target[prop];
    },
  };
  const p = new Proxy(obj, handler);
  console.log("p.b", p.b);// 40

这种情况,让proxy代理obj,那proxy就拦截了ojb的内部方法[[GET]],进而掉进了陷阱函数里了。

proxy就是拦截所有的基本操作defineProperty啥也没拦截,而是在调用defineOwnProperty这个基本操作。

所以很多现象就是来源于这个这个情况,嗯就是上面这种。

比如说vue2,调用数组的push方法,这一过程怎么拦截?比如设置length,用Object.defineProperty进行处理,直接就报错了(length属性无法被重新定义)。所以说,直接用通过数组对象去调原型里的push是没办法监听到的,是vue在中间插入一个对象,这个对象重写了数组的方法。这样实际上我们的数组对象去调的时候,调的其实是vue的那个对象,里面重写原型了。

vue3就不用这么麻烦了,proxy可以直接拦截到对象的基本操作,所以在陷阱函数里,就可以拦截到arr.push(1)的操作了,包括是这个push属性、length属性、里面的变化的值等。

js 复制代码
  const arr = [1, 2, 3];

  const p = new Proxy(arr, {
    get(target, prop) {
      console.log("get", prop);
      return target[prop];
    },
    set(target, prop, value) {
      console.log("set", prop, value);
      target[prop] = value;
      return true;
    },
  });

  p.push(1);
  
// get push
// get length
// set 3 1
// set length 4
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端