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

2024-10-02 17:12:33

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>

视图的变化过程：

最开始的视图：

2秒后的视图：

重点理解：

  // 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, // 不可写 });
})

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

总结

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

js根据需要计算数组中重复出现某个元素的个数

一.有时候的根据需要需要计算数组中某个元素重复出现的个数 var arr = ["apple","orange","apple","orange","pear","orange"]; 计算出来重复出现的元素个数:{apple: 2, orange: 3, pear: 1} 二.代码实现 //统计一个数组中有多少个不重复的单词: // 不用reduce时: var arr = ["
js中的reduce()函数讲解

定义: reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值.对空数组是不会执行回调函数的. 案例 1.数组求和 // 1.数组求和 var arr = [1,5,8,6,15,78,65,25,48,55] var sum = arr.reduce(function(total,currentValue){ return total+currentValue; }); console.log(sum);//306 var eachSum = 0;
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解

数组的扁平化:将多维数组变成一维数组对于一个像这样的嵌套数组:a=[1,[2,[3,4]],5,6]我们想要把它变成一个一维数组,有下面几种方法: 方法一:递归一 function parseArr(arr,res){ var i=0; for(i=0;i<arr.length;i++){ if(arr[i] instanceof Array){ parseArr(arr[i],res); }else{ res.push(arr[i]); } } } var a=[1,[2,[3,4]],5,
js序列化和反序列化的使用讲解

(1)序列化即js中的Object转化为字符串 1.使用obj.toJSONString() var str=obj.toJSONString(); //将JSON对象转化为JSON字符 2.使用JSON.stringify(obj) var str=JSON.stringify(obj); //将JSON对象转化为JSON字符 (2)反序列化即js中JSON字符串转化为Object 1.使用eval('('+josnStr+')') var obj=eval("("+data+&
js数组去重的方法总结

一.普通的方法去重 1.简单的去重方法 // 最简单数组去重法 /* * 新建一新数组,遍历传入数组,值不在新数组就push进该新数组中 * IE8以下不支持数组的indexOf方法 */ function uniq(array){ var temp = []; //一个新的临时数组 for(var i = 0; i < array.length; i++){ if(temp.indexOf(array[i]) == -1){ temp.push(array[i]); } } return te
js实现延迟加载的几种方法详解

这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助于提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情,像腾讯QQ依然对程序的性能不断地做优化,让用户的体验更好,性能优化的核心思想就是快,可以预先准备数据(如缓存的使用),可以按需获取,可以分段获取等都是常见的优化手段. 解题思路 : 1.defer属性 <script src="file.js" defer> </scr
js的各种数据类型判断的介绍

1.typeof typeof 用来判断各种数据类型,有两种写法:typeof xxx , typeof(xxx) 例如: typeof 2 输出 number typeof null 输出 object typeof {} 输出 object typeof [] 输出 object typeof (function(){}) 输出 function typeof undefined 输出 undefined typeof '222' 输出 string typeof true 输出 boole
js中call()和apply()改变指针问题的讲解

1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法.(天生的) 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖以运行的作用域. 一般来说,this总是指向调用某个方法的对象,但是使用call()和apply()方法时,就会改变this的指向. call有两个妙用: 1: 继承. 2: 修改函数运行时的this指针. 区别:call和apply的区别在于call的第二个参数可以是任意类型,而appl
js中实例与对象的区别讲解

关于js中实例和对象的解释如下: 比如定义persion如下: var person = new Object(); var person = {}; JS 是基于原型的面向对象语言, 所有数据都可以当作对象处理,所以 person 是对象, 可以把它当作是 Object 的实例..当然在js中, 一切都是对象. 第二个采用对象字面量的方式生成的person也是如此. 然而它内部没有调用new Object(),而是采用JSON的初始化方式: 将现有的引用指向person. 实例和对象的区别,从
js中数组对象去重的两种方法

方法一: 采用对象访问属性的方法,判断属性值是否存在,如果不存在就添加. 方法二: 采用数组中的reduce方法,遍历数组,也是通过对象访问属性的方法 var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: '04', value: '哈哈' },{ key: '01', value: '乐乐' }]; // 方法1:利用对象访问属性的方法,判断对象中

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

相关推荐

随机推荐