vue 双向数据绑定原理

采用defineProperty的两个方法get、set

示例

1 <!-- 表单 -->
2 <input type="text" id="input">
3 <!-- 展示 -->
4 <p id="desc"></p>

 

 1 let obj = {};
 2 let temp = {};//采用临时变量代理obj
 3 Object.defineProperty(obj,'name',{
 4     //获取obj的name属性会触发
 5     get(){ 
 6         return temp['name'];
 7     },
 8     //给obj的name属性赋值会触发
 9     set(val){ 
10         temp['name'] = val;//改变temp的结果
11         input.value = val;//将值赋值到输入框
12         desc.innerText = val; //将值显示到输入框下面
13         //obj.name = val; //死循环，不能采取这种方式赋值，采用temp代理方式赋值和取值
14     }
15 });
16 
17 //设置了id值不需要document.getElementById()
18 //调用上面的set方法，设置初始值
19 obj.name = "message";
20 //调用上面的get方法，获取属性值并放到输入框
21 input.value = obj.name;
22 
23 //输入框的变化时执行，这里不能使用箭头函数，因为箭头函数不绑定this，找的是上下文的this
24 input.addEventListener('input',function(){
25     //当值变化时会调用set方法
26     obj.name = this.value;
27 });

 

defineProperty扩展

 1 // Object.defineProperty(obj,'name',{
 2 //     configurable:false, //是否可删除
 3 //     writable:false, //是否可重新赋值
 4 //     enumerable:false,//是否可枚举，false不能for in循环和Object.keys(obj)，
 5 //     value:1
 6 // });
 7 // Object.keys(obj)返回一个给定对象obj的所有可枚举属性的字符串数组，即obj的属性名数组
 8 
 9 // 若有：
10 let obj2 = {};
11 
12 // 一方面设置属性和值
13 obj2.name = 1;
14 // 等同于：（后三个属性的默认值都是true）
15 Object.defineProperty(obj2, "name", {
16     value : 1,
17     writable : true,
18     configurable : true,
19     enumerable : true
20 });
21 
22 // 另一方面设置属性和值
23 Object.defineProperty(obj2, "name", {
24     value : 1 
25 });
26 // 等同于：（后三个属性的默认值都是false）
27 Object.defineProperty(obj2, "name", {
28     value : 1,
29     writable : false,
30     configurable : false,
31     enumerable : false
32 });