浅谈Vue之双向绑定
VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。那么Object.defineProperty究竟是该如何使用的呢？先看个例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h5 id="txtShow"></h5>
<input type="text" id="txt">
</div>
<script>
// mvvm 分为model(模型) view(视图) viewModel(视图模型)
// model 用来存储数据
// view 用来展示数据
// ViewModel 关联数据,和model实现双向绑定。
// 通过Object.defineProperty 定义一个属性
// 通过此方法为对象设置属性的时候 对象的属性值会包含一个get和set方法
// 当修改对象值得时候回触发相应的函数调用
// 参数一 需要定义属性的对象
// 参数二 属性名字
// 参数三 对象属性的修饰内容
// 在set方法中做一些处理，执行页面的刷新和回调
var model = {}; //创建一个新对象
var vm = '';
Object.defineProperty(model, 'txt', {
set: function (val) {
console.log('设置属性值');
console.log(val);
vm = val;
txtShow.innerHTML = this.txt;
},
get: function () {
console.log('获取属性值');
console.log(this);
return vm;
},
enumerable: true, //可枚举，默认false
configurable: true //该属性描述符能够被改变，同时该属性也能从对应的对象上被删除。默认false
})
var txtShow = document.getElementById('txtShow'),
txt = document.getElementById('txt');
txt.onkeyup = function () {
if (event.keyCode == 13) {
model.txt = txt.value;
}
}
</script>
</body>
</html>
通过上面的代码我们可以看到，在控制台，无论是改变vm的值还是model.txt的值，所对应的的，对方的值也会相应的改变，由此，这里我们就实现了双向绑定。
对于Object.defineProperty() ,大家应该都见过，只是认知的程度有所不同。
根据MDN web docs 中解释说： Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)参数
obj- 要在其上定义属性的对象。
prop- 要定义或修改的属性的名称。
descriptor- 将被定义或修改的属性描述符。
返回值
被传递给函数的对象。
该方法允许精确添加或修改对象的属性。通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法）， 这些属性的值可以被改变，也可以被删除。这个方法允许修改默认的额外选项（或配置）。默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。
数据描述符和存取描述符均具有以下可选键值：
configurable- 当且仅当该属性的 configurable 为 true 时，该属性
描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。 enumerable- 当且仅当该属性的
enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。enumerable定义了对象的属性是否可以在for...in循环和Object.keys()中被枚举。 -
数据描述符同时具有以下可选键值：
value- 该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为
undefined。 writable- 当且仅当该属性的
writable为true时，value才能被赋值运算符改变。默认为 false。
存取描述符同时具有以下可选键值：
| configurable | enumerable | value | writable | get | set | |
| 数据描述符 | YES | YES | YES | YES | NO | NO |
| 存取描述符 | YES | YES | NO | NO | YES | YES |
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。
记住，这些选项不一定是自身属性，如果是继承来的也要考虑。为了确认保留这些默认值，你可能要在这之前冻结 Object.prototype，明确指定所有的选项，或者通过 Object.create(null)将__proto__属性指向null。
在日常运用中，那你需要明白：
var o = {}; o.a = 1; // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : true, configurable : true, enumerable : true }); // 另一方面， Object.defineProperty(o, "a", { value : 1 }); // 等同于 : Object.defineProperty(o, "a", { value : 1, writable : false, configurable : false, enumerable : false });
下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。
function Archiver() { var temperature = null; var archive = []; Object.defineProperty(this, 'temperature', { get: function() { console.log('get!'); return temperature; }, set: function(value) { temperature = value; archive.push({ val: temperature }); } }); this.getArchive = function() { return archive; }; } var arc = new Archiver(); arc.temperature; // 'get!' arc.temperature = 11; arc.temperature = 13; arc.getArchive(); // [{ val: 11 }, { val: 13 }]
看到这个例子，你心中是不是有了些许想法？后面还有很多知识点，有需要的可以去MDN进行更加深入的了解，谢谢！
浙公网安备 33010602011771号