MVVM
M: model 模型 对应data数据
V: 视图 模板 其实就是html页面
VM: 视图模型 对应vue实例对象
vm通过dom listener和data-binding 为页面和数据建立连接
V <---> VM <---> M
数据代理
通过一个对象代理另一个对象中属性的操作, 其实就是使用defineProperty，将一个对象的get set操作另一个对象
<script src="../lib/vue.js"></script>
<body>
<div id="root">
</div>
<script type="text/javascript">
let person = {
name: 'island',
age: 1,
hair:100
}
Object.defineProperty(person, 'hair', {
// value: 18,
enumerable: true, // 是否可以枚举
// writable: true, // 属性是否可以被修改
configurable: true, // 属性是否可以被删除
// 有get和set就不能设置value和writable
// 读取属性值时调用
get() {
return '头发有' + this.value + '根, 功力还不够深厚'
},
// 设置属性时用
set(value){
console.log('value:', value);
this.value = value
}
})
person.hair = 1000
console.log(person.hair);
</script>
</body>
Vue中的数据代理
vm.prop
vm._data === data
_data把data进行了升级，从而能进行响应式操作
把data中的属性，放vm中一份
原理:
vm中的数据代理
通过vm对象来代理data对象中属性的操作(读/写)
vm数据代理的好处
更加方便的操作data中的数据
基本原理
将Object.defineProperty把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，指定一个getter/setter
在getter、setter的内部去操作data对应的属性