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, // 不可写 });
})
若有不足请多多指教！希望给您带来帮助！
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
相关文章
这篇文章主要介绍了详解VUE里子组件如何获取父组件动态变化的值，子组件通过props获取父组件传过来的数据，子组件存在操作传过来的数据并且传递给父组件,需要的朋友可以参考下2018-12-12
Vue中的this.$options.data()和this.$data用法说明
这篇文章主要介绍了Vue中的this.$options.data()和this.$data用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，实现方法有两种，本文通过实例代码对每种方法介绍的很详细，需要的朋友参考下2018-12-12
这篇文章主要介绍了vue el-upload手动上传实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
Vue过滤器filters用于一些常见的文本格式化,通过过滤器可以进行处理成自己想要展示出来的格式,由“管道”符号指示,本文给大家介绍Vue过滤器filters使用方式,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要给大家介绍了关于Vue如何在CSS中使用data定义的数据的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-05-05
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。接下来通过本文给大家介绍vue的基本用法与常见指令，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要给大家介绍了关于vue2.0/3.0响应式原理及区别的相关资料，文中通过图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了Vue 换肤方案验证，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
BuildAdmin elementPlus自定义表头添加tooltip方法示例
这篇文章主要介绍了BuildAdmin elementPlus 自定义表头,添加tooltip实现方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论