vue 的动态数据绑定，是利用 ES5 的对象的
Object.defineProperty() 的方法 [定义属性]，中的get 和set方法
一、defineProperty 基本用法
1、基本写法：
var person= {};
Object.defineProperty(person, "name", {
value: '张三',
})
console.log(person.name); // 打印：张三
2、参数
一、参数
第一个参数：要设置的目标对象（必填）
第二个参数：需要定义的属性或方法的名称（必填）
第三个参数：目标属性所拥有的特性,对象。（descriptor）（必填）
二、关于 descriptor 的属性：
value: 属性的值
writable：是否可写 -- 如果为false，属性的值就不能被重写, 只能为只读了
configurable：总开关，一旦为false，就不能再设置他的（value，writable，configurable）
enumerable：是否可枚举（是否能在for...in循环中遍历出来或在Object.keys中列举出来）
set：改变值
get：获取值
3、descriptor 参数的基本用法
1、默认值
writable、configurable、enumerable：默认值为 false
2、configurable
configurable：第一次设置 false后，
再次通过 defineProperty 设置其他值（value，writable，configurable）就会报错。
var person= {};
Object.defineProperty(person, "name", {
value: '张三',
configurable:false
})
Object.defineProperty(person, "name", {
value: '李四',
})
报错.png
3、writable
writable：设置false后，变为只读。
var person= {};
Object.defineProperty(person, "name", {
value: '张三',
configurable:false
})
console.log(person.name); // 打印：张三
person.name = "李四"; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
console.log(person.name) // 打印：张三，赋值不起作用。
4、enumerable
enumerable：是否可枚举
（是否能在for...in循环中遍历出来或在Object.keys中列举出来）
var person = {};
Object.defineProperty(person, "name", {
value : '张三',
enumerable: true
}
);
console.log(Object.keys(person)); // true：打印 ["name"]; false：打印 []
5、get、set
1、set :更新数据；set：获取数据
2、在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会错，
就是说想用 get 和 set，就不能用 writable 或 value 中的任何一个。
3、简单来说，赋值或者取值的时候会分别触发 set 和 get 对应的函数。
var person= {};
var temp = [];
Object.defineProperty(person, 'name', {
set: function(newVal) {
temp['name'] = newVal;
console.log('为person设置新的姓名：' + newVal);
},
get: function() {
var _name = temp['name'] || '默认姓名';
console.log('获取person的姓名：' + _name);
return _name;
}
});
person.name = '张三'; // 打印 获取person的姓名：张三
console.log(person.name) // 打印 获取person的姓名：张三(如果不设置name，这里会打印'默认姓名')
4、get 、set 动态绑定数据的例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>vue</title>
</head>
<body>
<input type="text" id="changeDemo">
<p id="getData"></p>
<script>
var obj={};
var dataArr=[];
//触发obj对象set和get方法的时候，趁机来输出或修改dataArr数组的内容
Object.defineProperty(obj,'name',{
// 改变值
set:function(val){
dataArr['name']=val;
},
// 获取值
get:function(){
return dataArr['name'];
}
})
var changeDemo=document.querySelector('#changeDemo');
var getData=document.querySelector('#getData');
/*
keyup 事件：
1、拿到 input value 的值，赋给 obj;
赋值时会触发 obj 的 set 方法：改变数组对应的下标值
2、将数组的值 在页面动态展示
*/
changeDemo.onkeyup=function(){
obj['name']=changeDemo.value; // 1
getData.innerHTML=dataArr['name']; // 2
console.log(dataArr)
}
</script>
</body>
</html>
参考链接：
https://www.cnblogs.com/lvmylife/p/7474374.html
https://blog.csdn.net/u014787301/article/details/52083218
网友评论