Vue中的MVVM模型及数据代理

MVVM模型

1.M：模型(Model)：data中的数据
2.V：视图(View)：模板代码
3.VM：视图模型(ViewModel)：Vue实例

Vue中：

1.data中所有的属性，最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用

数据代理：通过一个对象代理另一个对象中属性的操作(读/写)

let number = 18;
let person = {
    name: 'YY',
    sex: '男'
}
Object.defineProperty(person, 'age', {
    //value:18,
    // enumerable: true, // 控制属性是否可以枚举，默认false
    // writable: true, // 控制属性是否可以被修改，默认false
    // configurable: true, // 控制属性是否可以被删除，默认false

    // 当有人读取person的age属性时，getter就会被调用，且返回值就是age的值
    get() {
        console.log('有人读取age属性了');
        return number;
    },
    // 当有人修改了person的age属性时，setter就会被调用，且会收到修改的具体值
    set(value) {
        console.log('有人修改了age属性，且值是', value);
        number = value;
    }
})

Vue中：

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

<div id="root">
    <h2>名称：{{_data.name}}</h2>
    <h2>地址：{{_data.address}}</h2>
</div>

const vm = new Vue({
    el: '#root',
    data() {
        return {
            name: 'YY',
            address: '杭州'
        }
    }
})