Object.defineProperty 和 Proxy 响应式原理 vue2 vue3

和世界不一样，那就不一样！

已于 2024-06-05 14:22:53 修改

阅读量294

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-06-05 14:20:42 首次发布

本文链接：https://blog.csdn.net/weixin_44834981/article/details/139470651

版权

一、VUE2 响应式原理 Object.defineProperty

Object.defineProperty 方法允许精确添加一个属性到对象上，或者修改对象的现有属性，并返回这个对象。它可以用来定义或修改属性的特性，如 value, writable, enumerable, 和 configurable。

1) Object.defineProperty 这个方法接收三个参数:

1.属性所在的对象
2.属性的名字
3.一个描述符对象

描述对象：

1.configurable:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。

2.enumerable：表示能否通过for in循环访问属性，默认值为false

3.writable：表示能否修改属性的值。默认值为false。

4.value：包含这个属性的数据值。默认值为undefined。

 // 理解属性
      var p1 = {
        name: "lisi",
      };

      Object.defineProperty(p1, "name", {
        configurable: false, // not delete
        enumerable: false, // 能否通过for in循环访问属性，默认值为false
      });
        // delete删除属性
      console.log(p1); //{ name: 'lisi' }
      delete p1.name;
      console.log(p1); //{ name: 'lisi' }

       // 能否通过for in循环访问属性，默认值为false
      for (var i in p1) {
        console.log(p1[i]);
      } // lisi

2) 响应式原理实践：

var book = {
        _year: 2004,
        edition: 1,
      };
    
      Object.defineProperty(book, "year", {
        get: function () {
          return this._year;
        },
        set: function (newYear) {
          if (newYear > 2004) {
            this._year = newYear;
            this.edition += newYear - 2004;
          }
        },
      });

      book.year = 2005;
      console.log(book.edition); // 2
      console.log(book._year); //2005

参考别人写的demo：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      #myInput {
        width: 400px;
        height: 50px;
        font-size: 40px;
        color: red;
      }
      #contain {
        margin-top: 20px;
        width: 400px;
        height: 200px;
        border: 1px solid salmon;
      }
    </style>
  </head>
  <body>
    <input id="myInput" type="text" />
    <div id="contain"></div>

    <script>
      var text;
      window.data = {};
      var oIn = document.getElementById("myInput");
      var oDiv = document.getElementById("contain");

      oIn.addEventListener("input", function (e) {
        text = e.target.value;
        console.log(text);
        window.data.value = text;
      });
      Object.defineProperty(window.data, "value", {
        get() {
          return "";
        },
        set(v) {
          oDiv.innerHTML = v;
        },
      });
    </script>
  </body>
</html>

二、VUE3响应式原理 Proxy

Proxy 对象用于创建一个对象的代理，从而可以拦截和自定义对象的基本操作（如属性查找、赋值、枚举、函数调用等）。Proxy 提供了一种更灵活的方式来定义或修改对象的行为。

1）语法

// target ：需要封装的目标对象 // handler ：一些属性方法的集成（占位符对象） const proxy = new Proxy(target, handler);

常用的语法
拦截对属性的读取操作
get(target, property, receiver)

拦截对属性的写入操作
set(target, property, value, receiver)

拦截函数的调用
apply(target, thisArg, argumentsList)

判断对象是否拥有某个属性
has(target, property)

拦截删除属性的操作
deleteProperty(target, property)

2）响应式原理代码

 const handler = {
        // 拦截目标对象的属性读取操作
        get(target, prop, receiver) {
          console.log(`访问了${prop}属性`);
          // 使用Reflect.get执行目标对象的属性读取操作
          return Reflect.get(target, prop, receiver);
        },
        // 拦截目标对象的属性设置操作
        set(target, prop, value, receiver) {
          console.log(`设置了${prop}属性`);
          // 使用Reflect.set执行目标对象的属性设置操作
          return Reflect.set(target, prop, value, receiver);
        },
      };

      // 创建一个目标对象
      const target = {
        name: "Alice",
        age: 20,
      };

      // 创建一个代理对象
      const proxy = new Proxy(target, handler);

      // 使用代理对象执行各种操作
      console.log(proxy.name); // 访问了name属性，输出Alice
      proxy.age = 21; // 设置了age属性
      console.log(proxy.age); // 访问了age属性，输出21

三、object.definePropery 和 Proxy的区别
1） Object.defineProperty()语法
重点：vue为什么对数组对象的深层监听无法实现，因为组件每次渲染都是将data里的数据通过defineProperty进行响应式或者双向绑定上，之前没有后加的属性是不会被绑定上，也就不会触发更新渲。

Object.defineProperty( Obj, 'name', {
    enumerable: true, //可枚举
    configurable: true, //可配置
    // writable:true, //跟可配置不能同时存在
    // value:'name',  //可写死直
    get: function () {
        return def
    },
    set: function ( val ) {
        def = val
    }
} )

2） Proxy的语法

//两个参数，对象，13个配置项
const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    },
    set:function(){ },
    ...13个配置项
};
const p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
console.log(p.a, p.b);      // 1, undefined
console.log('c' in p, p.c); // false, 37

对比了上面两种语法是不是就懂了，defineProperty只能响应首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的

对比

灵活性：Proxy 提供了更多的灵活性和强大的拦截能力，可以拦截几乎所有的 JavaScript 操作。
兼容性：Object.defineProperty 有更广泛的浏览器兼容性，而 Proxy 可能不被所有旧浏览器支持。
性能：在某些情况下，使用 Object.defineProperty 可能比 Proxy 更快，因为 Proxy 需要更多的设置和拦截。
易用性：Object.defineProperty 相对简单，易于理解和使用，而 Proxy 则提供了更复杂的功能，但学习曲线更陡峭。

和世界不一样，那就不一样！

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Object.defineProperty 和 Proxy 响应式原理 vue2 vue3

对比了上面两种语法是不是就懂了，defineProperty只能响应首次渲染时候的属性，Proxy需要的是整体，不需要关心里面有什么属性，而且Proxy的配置项有13种，可以做更细致的事情，这是之前的defineProperty无法达到的。:表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性，默认值为false。方法允许精确添加一个属性到对象上，或者修改对象的现有属性，并返回这个对象。提供了一种更灵活的方式来定义或修改对象的行为。：表示能否修改属性的值。
复制链接

扫一扫