您好,欢迎来到好走旅游网。
搜索
您的当前位置:首页vue.js的双向数据绑定Object.defineProperty方法的神奇之处

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

来源:好走旅游网

存取描述符: 由一对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, // 不可写 });
})

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

总结

Copyright © 2019- haog.cn 版权所有

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务