Vue实现MVVM

Vue实现MVVM

js创建对象的两种⽅式

//第⼀种
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
 alert(this.name);
}
//第⼆种
var person = {
 name: "Nicholas",
 age: 29,
 job: "Software Engineer",
 sayName: function() {
 alert(this.name);
 }
}

属性描述符：

数据属性：数据属性包含⼀个数据值的位置，在这个位置可以读取和写⼊值

1、可配置性 [[Configurable]] : 表示能否通过delete删除属性，能否修改属性特性，能否把数据属性修改为访问器属性。
2、可枚举性[[Enumerable]]：表示能否通过for-in循环返回属性。
3、可写⼊性[[Writable]]：表示能否修改属性值。
4、属性值[[Value]]：表示属性值。

访问器属性：是包含⼀对getter和setter函数

**Object.defineProperty()**⽅法对数据属性和访问器属性进⾏修改

该⽅法接受三个参数：属性所在对象，属性名字和⼀个描述符对象

**Object.getOwnPropertyDescriptor()**⽅法取得指定对象指定属性的描述符

这个⽅法接收两个参数：属性所在对象，属性名字

如果要求对⽤户的输⼊进⾏特殊处理，或者设置属性的依赖关系，

就需要⽤到访问器属性了

Object.defineProperty

ES6中某些方法的实现依赖于它，VUE通过它实现双向绑定

此方法会直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象

语法

Object.defineProperty(object, attribute, descriptor)
这三个参数都是必输项
第一个参数为目标对象
第二个参数为需要定义的属性或者方法
第三个参数为目标属性所拥有的特性

descriptor
value: 属性的值
writable: 属性的值是否可被重写（默认为false）
configurable: 总开关，是否可配置，若为false, 则其他都为false（默认为false）
enumerable: 属性是否可被枚举（默认为false）
get: 获取该属性的值时调用
set: 重写该属性的值时调用

简单定义一下

var a= {}
Object.defineProperty(a,"b",{
   value:123
})
console.log(a.b)  //123
a.b = 456
console.log(a.b)  //123
a.c = 110
for (item in a) {
    console.log(item, a[item])    //c 110
}
因为 writable 和 enumerable 默认值为 false, 所以对 a.b 赋值无效，也无法遍历它

configurable

总开关，是否可配置，设置为 false 后，就不能再设置了，否则报错， 例子

var a= {}
Object.defineProperty(a,"b",{
  configurable:false
})
Object.defineProperty(a,"b",{
  configurable:true
})
//error: Uncaught TypeError: Cannot redefine property: b

writable

是否可重写

var a = {}; 
Object.defineProperty(a, "b", { 
    value : 123,
    writable : false 
});
console.log(a.b); // 打印 123
a.b = 25; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）
console.log(a.b); // 打印 123， 赋值不起作用。

enumerable

属性特性 enumerable 定义了对象的属性是否可以在 for…in 循环和 Object.keys() 中被枚举

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:true
})
console.log(Object.keys(a));// 打印["b"]

enumerable改为false

var a= {}
Object.defineProperty(a,"b",{
  value:3445,
  enumerable:false //注意咯这里改了
})
c