vue.js的双向数据绑定Object.defineProperty方法的神奇之处
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, // 不可写 }); })
若有不足请多多指教!希望给您带来帮助!
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
上一篇: 猪皮冻的做法,熟悉的记忆里的味道!
推荐阅读
-
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
-
vue.js数据绑定的方法(单向、双向和一次性绑定)
-
vue.js使用v-model指令实现的数据双向绑定功能示例
-
vue.js利用defineProperty实现数据的双向绑定
-
vue 数据双向绑定的实现方法
-
详解Vue.js之视图和数据的双向绑定(v-model)
-
分别使用 Object.defineProperty 和 proxy 实现简单的数据双向绑定
-
vue的双向数据绑定(Object.defineProperty(),和es6的Proxy的底层封装是Object.defineProperty()封装的);...
-
简单实现Vue2.0(Object.defineProperty)和Vue3.0(Proxy)的数据双向绑定
-
Object.defineProperty 实现双向数据绑定的那些事