文章目录
- MVVM
- Object.defineProperty
- 数据代理
- vue 中的数据代理
MVVM
MVVM维基百科
虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例:
const vm = new Vue({
...
})
MVVM模型
- M:模型(Model) :data 中的数据
- V:视图(View):模板代码
- VM:视图模型(ViewModel):Vue实例
观察发现:
1、data 中所有的属性,最后都出现在了 vm 身上(可以打印vue实例观察)
2、vm 身上所有的属性及 Vue 原型上所有属性,在 Vue 模板中都可以直接使用
Object.defineProperty
我们通过 Object.defineProperty
给 person 增加一个 age 属性,然后打印 person 和 自身可枚举属性组成的数组
Vue.config.productionTip = false
let person = {
name:"张三",
sex:"男"
}
Object.defineProperty(person,'age',{
value:18
})
console.log(person)
console.log(Object.keys(person));
可以看到只能打印出 name 和 sex 属性。也就是说这种方式添加的属性是不可枚举,也就是不能遍历的
for(let key in person){
console.log(person[key]);
}
我们可以对 Object.defineProperty
进行配置,增加可以枚举、可以修改、可以被删除的配置
let person = {
name:"张三",
sex:"男"
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//控制属性是否可以枚举,默认false
writable:true,//控制属性是否可以修改,默认false
configurable:true//控制属性是否可以被删除,默认false
})
console.log(person);
我们这里只测试一下删除功能,控制台输入 delete person.age
还可以在其中增加 getter 和 setter
let number = 19
let person = {
name:"张三",
sex:"男"
}
Object.defineProperty(person,'age',{
//当读取person的age属性时,get函数会被调用,且返回值就是age的值
get:function () {
console.log("读取了age属性");
return number
},
//当修改person的age属性时,set函数(setter)会被调用,且能收到值
set(value){
console.log("修改了age属性,值为"+value);
number = value
}
})
数据代理
定义:通过一个对象代理另一个对象中的属性的操作(读 / 写 )
我们来写一个最简单的数据代理
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
这样我们可以通过 obj2 也可以操作 obj 的 x
首先打印了 obj2,除了自身的 y,还有 obj 的 x
现在修改 obj2.x = 200
我们再打印 obj 发现其中的 x 变成了 100
vue__110">vue 中的数据代理
总结:
1、Vue 中的数据代理
通过 vm 对象来代理 data 对象中属性的操作(读/写)
2、Vue 中数据代理的好处
更加方便的操作 data 中的数据
3、基本原理
通过object.defineProperty()
把 data 对象中所有属性添加到 vm 上,为每一个添加到 vm 上的属性,都指定一个getter/setter
在getter/setter
内部去操作(读/写)data 中对应的属性