Vue的MVVM模型和数据代理

MVVM模型

• M：模型Model：对应data中的数据
• V：视图View：模板
• VM：视图模型View Model：Vue实例对象
  
• 把数据放到指定位置，写出模板代码，中间框架开始工作，把左右连接起来。
• const vm = new Vue（{}）data中的数据都出现在vm身上。
• 插值语句{{}}中除了可以写表达式以外，还可以写vm身上的任何属性，包括vue原型上的任何属性。

数据代理

Object.defineProperty

• 给一个对象定义属性。
• 传入三个参数，第一个参数是给哪个对象添加属性，第二个参数是添加的属性的名称，第三个参数是配置项
• 配置项是一个对象
• Object.defineProperty中定义的属性默认不可枚举，不参与遍历，不可修改，不可删除
• Object.keys()传入一个对象作为参数，这个方法会将对象中所有的属性名提取出来变成一个数组

//number和person是两个东西，但是借助defineProperty可以让两者关联
let number = 18；
let person = {
	name:"张三"
	sex:"女"
}
Object.defineProperty(person,"age",{
	//value:18
	//enumerable:true//控制属性是否可以枚举，默认是false不可枚举
	//writable:true//控制属性是否可以被修改，默认值是false不可修改
	//configurable:true//控制属性是否可以被删除，默认是false不可删除
	get(){
		//当有人读取person的age属性时，get函数（getter）就会被调用，返回值就是age的值
		return number
	}
	set(value){
		//当有人修改person的age属性时，setter就会被调用，且会收到修改的具体值
		number = value
	}
})
console.log(person)

Vue数据代理

代理：通过一个对象代理对另一个对象中属性的操作（读/写）

简单的代理：

let obj1 = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,"x",{
	get(){
		return obj1.x//读取obj2中的x属性实际上返回onbj1的x
	}
	set(value){
		obj1.x = value//修改obj2的x属性实际上修改obj1的x
	}
})

Vue中的代理

const v = new Vue({
	data:{
		name:'Tome'
	}
}).$mount("#root")
console.log(v)

读取v中的name实际上是得到data中的name，修改v中的name实际上是修改data中的name
vm中有_data属性就是我们定义的data（_data做了数据劫持，监听属性变化），然后将_data中的数据通过数据代理放到vm上。

总结：

• Vue中的数据代理通过vm对象来大力data对象中的属性的操作（读/写）
• Vue中数据代理的好处：更加方便的操作data重点 数据
• 基本原理：
• • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
• • 为每一个添加到vm上的属性，都指定一个getter/setter
• • 在getter/setter内部去操作（读/写）data中对应的属性