MVVM模型

1、模型组成：
（1）M：Model模型，用于保存数据
（2）V：View视图，对应template中的DOM部分
（3）VM：ViewModel视图模型，是连接视图和模型之间的地方，比如视图或者数据发生相应地变化通过VM将相应地变化传递给另一方。
2、作用：通过修改数据、视图层自动渲染，不用我们自己操作DOM，这就是数据驱动视图。

Vue中数据代理引入

vue中数据代理

1、作用：通过数据代理使data对象中的所有属性由vm对象来代理操作。 2、举例：比如，我创建如下的vue实例vm，在控制台查看vm

const vm = new Vue({
    el:'#root',
	data:{
		name1:'bug_killer1',
		name2:'bug_killer2',
		age:19,
	}
})

可以发现data中的数据出现在了vm对象中

vue中的数据代理就是将data中的数据代理给vm，并且当数据被访问或者被修改时vm中的数据和data中的数据都发生改变，这些功能通过vm提供的getter()和setter()函数来实现，如下图：

vm中的getter()和setter()

Object.defineProperty方法

1、作用：给vm添加与data对象的属性对应的属性 2、案例：通过Object.defineProperty方法创建一个person对象

<script>
		let hobyy = '学习'
		let person = {
		  name: '张三',
		  sex: '男',
		}
		
		Object.defineProperty(person, 'hobby', {
		  // value:18,
		  // enumerable:true,		是否可以枚举
		  // writable:true,			是否可以被修改
		  // configurable:true	是否可以被删除		
		  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
		  get() {
		    console.log('有人读取hobby属性了')
		    return hobby
		  },
		
		  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
		  set(value) {
		    console.log('有人修改了hobby属性，且值是', value)
		    number = value
		  }
		
		})
		// console.log(Object.keys(person))
		console.log(person)
	</script>