1. 顺带提一句MVVM

M是model 就是vue组件中data部分

V是视图,就是页面展示部分

VM是Vue的实例对象。const vm = new Vue({一些配置})		vm.$mount('#app') 将Vue的实例对象挂在到页面上

2. 主角:object.defineProperty

给对象定义属性


``` js
一般定义形式

const obj = {
	name:"wawa",
  	age:"20"
  	...
}

// 下面两个例子

object.defineProperty(obj,'gender',{
    // 四个基本配置 
    value:'male'
	enumerable:true; 默认false
    writabel:true; 默认false
    configurable:true; 默认false
                      
                      
    // 当有人读取obj的gender属性时,get函数(getter就代指get函数)就会被调用,可返回其gender值
    get(){
  		return gender
	}
	// set类似
	set(value){
    }
})

// !!!数据代理 // 我们其实可以通过数据代理;即通过一个对象,读取和改变另一个对象中的值;例子中obj2读取obj的age值

const obj2 = {
	name:'haha'
  
  	// age = obj.age ; 但修改后,obj的age不会修改
}

// 要求obj2的age和obj1的age一直,修改了obj2的age,obj1的age也要改
object.defineProperty(obj2,'age',{
    get(){
  	   return obj.age	// 通过obj2读取obj的age
	},
	set(value){
      obj.age = value 	// 通过obj2修改obj的age
    }              
}
```

3. vue 使用数据代理

{...} 这样显示的东西就是数据代理,是通过obejct.defineProperty(vm,"name",{})这样加上去的。当要访问/修改的时候,是要getter/setter的;实例对象vm是从vue组件中的data中拿到的值,改的也是data中的值。所以是vm 去拿到model的值,去渲染到view上,mvvm

alt

alt

4. 图解

alt

alt