欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

vue.js的双向数据绑定Object.defineProperty方法的神奇之处

程序员文章站 2023-11-18 21:43:40
vue.js 2.0版的双向数据绑定就是通过object.defineproperty方法实现的，俗称属性拦截器。 这么说吧，vue.js是通过它实现双向绑定的。俗称属性...

vue.js 2.0版的双向数据绑定就是通过object.defineproperty方法实现的，俗称属性拦截器。

这么说吧，vue.js是通过它实现双向绑定的。俗称属性拦截器。而且专门用来监控对象属性变化的object.observe方法也被草案发起人撤回了(此方法在node环境中仍能使用)。可见defineproperty的威力之大。

object.defineproperty()    不支持ie8

方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

// 语法: 
/*
 * object.defineproperty(obj,prop,descriptor)
 * @param: obj:需要定义属性的对象;
 *     prop:需要定义或修改的属性；
 *     descriptor:将被定义或修改属性的描述符{}
 * 返回值 : 返回传入函数的对象，即第一个参数obj
 */

对象里目前存在的属性描述符主要有两种形式： 数据描述符和存取描述符.

数据描述符： 拥有可写或不可写值的属性*

        可选键值：
        configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除
        enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
        writable: 当且仅当该属性的值为true时，该属性才能被赋值运算符改变， 默认为false。
        value： 该属性对应的值，可以是任意有效的javascript的值（数值，对象，函数等），默认为undefined

存取描述符： 由一对getter-setter函数功能来描述的属性*

        可选键值：
        configurable: 当且仅当configurable为true时，改属性描述符才能够被改变，也能被删除
        enumerable: 当其值为true时，该属性才能够出现在对象的枚举属性中，默认为false
        get: 给属性提供getter的方法，如果没有 getter 则为undefined。当我们读取某个属性的时候，其实是在对象内部调用了该 方法，此方法必须要有return语句。该方法返回值被用作属性值。默认为 undefined
        set：设置属性值的方法， 如果没有 setter 则为 undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认为 undefined。也就是说，当我们设置某个属性的时候，实际上是在对象的内部调用了该方法

note：两者不能同时定义， 否则报错==

get和set是我们今天要重点讨论的两个方法，先看一下他们的简单实例：

实例：

var a = {}; 
object.defineproperty(a, 'b', { 
  set: function(newvalue) { 
    console.log('赋值操作, 赋值' + newvalue); 
  }, 
  get: function() { 
    console.log('取值操作'); 
    return 2; //这里需注意 我硬让他返回2
  } 
}); 
a.b = 1; // 赋值操作，赋值1 
a.b; // 取值操作2

虽然我将a.b的值设置成了1，但是因为我在get方法中始终返回了2，所以a.b的值一直是2。

那么，这就好玩儿了：我们可以在页面监听某个变量，当变量发生变化的时候，我们就更新对应的视图。由数据来驱动视图的更新，是不是很熟悉？是的，vue .js的核心思想就是这个。我们写个小例子：

<!doctype html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>defineproperty</title>
 </head>
 <body>
  <div id="test">这是一个测试</div>
  <script>
   var view = document.getelementbyid("test");
   var data = {};
   var i = 0;
   object.defineproperty(data, "b", {
    set: function(newvalue) {
     //当data.b的值改变的时候更新＃test的视图
     view.textcontent = newvalue;
    },
    get: function() {}
   });
   setinterval(function() {
    i++;
    data["b"] = "data.b的值更新了，我要更新视图" + i;
   }, 2000);
  </script>
 </body>
</html>

视图的变化过程：

vue.js的双向数据绑定Object.defineProperty方法的神奇之处

最开始的视图：

vue.js的双向数据绑定Object.defineProperty方法的神奇之处

2秒后的视图：

vue.js的双向数据绑定Object.defineProperty方法的神奇之处

重点理解：

  // 3.object.defineproperty(obj,propertyname,{}):给对象添加属性(指定描述符)
  const obj = {
    firstname: 'a',
    lastname: 'b',
  }
  // 给obj添加fullname属性
  // obj.fullname = 'a-b'
  /*
    1.数据描述符
      configurable: 是否可以重新定义
      enumerable: 是否可以枚举
      value: 初始值
      writable: 是否可以修改属性值
    2.访问描述符
      get: 回调函数，根据其它相关的属性动态计算得到当前属性值
      set: 回调函数，监视当前属性值的变化，更新其它相关的属性值
  */
  object.defineproperty(obj,'fullname',{
    get() {
      return this.firstname+'-'+this.lastname;
    },
    set(value) {
      const names = value.split('-');
      this.firstname = names[0];
      this.lastname = names[1];
    }
  })
  console.log(obj.fullname);//a-b
  obj.firstname = 'c';
  obj.lastname = 'd';
  console.log(obj.fullname);//c-d
  obj.fullname = 'e-f';
  console.log(obj.firstname,obj.lastname);//e f

object对象有一个freeze的方法，用于实现对象属性和方法的不可更改

// 使用方法：
const arr = [1,2,3,4];
object.freeze(arr); // 变量arr不可更改
arr.push(5); // 报错：不能添加属性

object.definepropperty也可以实现规定变量的不可更改

const obj = { key: 'chris', vlaue: 'person' }; 
object.defineproperty(obj, 'key', { 
  configurable: false, // 不可删除 
  writable: false, // 不可写 });
})

若有不足请多多指教！希望给您带来帮助！

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接

上一篇： C#在DataTable中根据条件删除某一行的实现方法

下一篇： iOS13适配深色模式(Dark Mode)的实现

推荐阅读