基础-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
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐4 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄5 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser7 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la7 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui7 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui