vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化，而执行这部操作，依赖的就是js的Object.defineProperty方法Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
下面就来介绍一下Object.defineproperty()
Object.defineProperty 需要三个参数（object , propName , descriptor）
1 object 对象 => 给谁加
2 propName 属性名 => 要加的属性的名字 【类型：String】
3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】
它一共有以下六个个特性
- value: 设置属性的值
- writable: 值是否可以重写。true | false
- enumerable: 目标属性是否可以被枚举。true | false
- configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false
- set: 目标属性设置值的方法
- get：目标属性获取值的方法
首先来介绍第一个 value
let a = {};
Object.defineProperty(a,'name',{
value:"你好"
})
console.log(a);
//打印结果 {name: "你好"}
//如果a中本身拥有一个name属性使用Object.defineproperty去重新定义又会怎样呢let a = {
name:'初始值'
};
Object.defineProperty(a,'name',{
value:"你好"
})
console.log(a);//打印结果 {name: "你好"}这个方法是为 当前的对象添加一个属性 而属性的值为 ‘你好’,如果对象原本便有这个属性那么重写此属性 值得一提的是用这种方法定一的属性时只能读取不能更改的
a.name='我要重新给你赋值';
//以上代码将会报错 Error in created hook: "TypeError: Cannot assign to read only property 'name' of object '#<Object>'"
为什么，其原因就是应为没有定义writable特性
第二个 writable
let a = {};
Object.defineProperty(a,'name',{
value:"你好",
writable:true
})
a.name="我要重新给你赋值";
console.log(a);
//打印结果 {name: "我要重新给你赋值"}此特性是表明 name属性是否可以写入
第三个enumerable
此属性的表明 被定义的属性是否可以可以被for-in循环或Object.keys()检索到
let a = {};
Object.defineProperty(a, "name", {
writable: true,
enumerable: true,
value:'nihao'
});
console.log(Object.values(a));// 打印值["nihao"]
let a = {};
Object.defineProperty(a, "name", {
writable: true,
enumerable: false,
value:'nihao'
});
console.log(Object.values(a));//打印值[] 定义的属性name没有被检索到第四个 configurable
此属性表明是否可以再次修改 特性
let a = {
a_attr:"11"
};
Object.defineProperty(a, "name", {
writable: false,//定义特性之后
value: "nihao",
configurable:false //不允许修改特性
});
Object.defineProperty(a, "name", {
value: "nihao",
writable:true //将允许写入特性设置为true
});
a.name="180" //写入值 报错Error in created hook: "TypeError: Cannot redefine property: name"
console.log(a.name)第五个 get set
这个就是vue双向绑定原理的实现基础了这两个属性表明 属性被写入或者读取是执行方法并且是同步的
let a = {};
Object.defineProperty(a, "name", {
get(){
console.log("我要被读取了")
return '返回的读取的值'
},
set(val){
console.log("我要被写入了 我是写入的值:"+val)
}
});
console.log(a.name); //执行get方法 打印（我要被读取了） 和 （返回读取到的值）
a.name="我要写入你" //执行set方法 打印（我要被写入了 我是写入的值：我要写入你）