一、什么是MVVM? M:model v:view vm vue model
二、数据代理和响应式数据
1、 先了解一下这个方法Object.defineProperty(object,descriptors)
作用：为指定对象定义扩展多个属性
-
get: 用来获取当前属性值得回调函数
-
set:修改当前属性值的触发的回调函数，并且实参即为修改后的值
-
存取器属性：setter,getter一个用来存值，一个用来取值
//2、添加或者修改对象的一个属性，让其成为响应式属性（可以影像其他的属性数据）
Object.defineProperty(obj,'fullName',{
get(){
//访问这个属性的回调函数
return this.firstName +'-'+this.lastName;
},
set(val) {
//设置这个属性的回调函数
let arr = val.split('-');
this.firstName = arr[0];
this.lastName = arr[1];
}
})
console.info(obj);
//当我进行赋值时，会走 Object.defineProperty的方法进行赋值、取值
obj.fullName = 'liu-liying';
console.info(obj);
3、那什么是数据代理呢？
vm.msg 取值时，取得是Object.defineProperty get方法返回的值，这个过程就是数据代理的过程
let vm = new Vue({
el:'#root',
data:{
msg:'zly'
}
})
console.info(vm.msg); //数据是vm实例化对象当中的msg
console.info(vm._data.msg);//数据就是原本配置对象当中的msg
console.info(vm);
Object.defineProperty(vm,'msg',{
get() {
},
set(v) {
}
})
vm身上会有data当中所有的属性
vm是代理者，代理了data当中的数据
当访问vm的属性是，其实返回的还是data当中同名属性的值
当修改vm的属性时，修改的起始还是data当中同名的属性值
4、那什么是响应式数据
数据改变，页面也跟着改变，就被称为响应式数据。也就是说data里面的数据就是响应式数据
