vue 双向数据绑定原理

博客地址： https://ainyi.com/8

采用defineProperty的两个方法get、set

示例

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

 let obj = {};
 let temp = {};//采用临时变量代理obj
 Object.defineProperty(obj,'name',{
     //获取obj的name属性会触发
     get(){
         return temp['name'];
     },
     //给obj的name属性赋值会触发
     set(val){
         temp['name'] = val;//改变temp的结果
         input.value = val;//将值赋值到输入框
         desc.innerText = val; //将值显示到输入框下面
         //obj.name = val; //死循环，不能采取这种方式赋值，采用temp代理方式赋值和取值
     }
 });

 //设置了id值不需要document.getElementById()
 //调用上面的set方法，设置初始值
 obj.name = "message";
 //调用上面的get方法，获取属性值并放到输入框
 input.value = obj.name;

 //输入框的变化时执行，这里不能使用箭头函数，因为箭头函数不绑定this，找的是上下文的this
 input.addEventListener('input',function(){
     //当值变化时会调用set方法
     obj.name = this.value;
 });

defineProperty扩展

 // Object.defineProperty(obj,'name',{
 //     configurable:false, //是否可删除
 //     writable:false, //是否可重新赋值
 //     enumerable:false,//是否可枚举，false不能for in循环和Object.keys(obj)，
 //     value:1
 // });
 // Object.keys(obj)返回一个给定对象obj的所有可枚举属性的字符串数组，即obj的属性名数组

 // 若有：
 let obj2 = {};

 // 一方面设置属性和值
 obj2.name = 1;
 // 等同于：（后三个属性的默认值都是true）
 Object.defineProperty(obj2, "name", {
     value : 1,
     writable : true,
     configurable : true,
     enumerable : true
 });

 // 另一方面设置属性和值
 Object.defineProperty(obj2, "name", {
     value : 1
 });
 // 等同于：（后三个属性的默认值都是false）
 Object.defineProperty(obj2, "name", {
     value : 1,
     writable : false,
     configurable : false,
     enumerable : false
 });

博客地址： https://ainyi.com/8