一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第15天，点击查看活动详情。

MVVM

虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例：

const vm = new Vue({
        ...
})

MVVM模型

M:模型(Model) ：data 中的数据
V:视图(View）：模板代码
VM:视图模型(ViewMode1)：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 中的数据代理

总结：

1、Vue 中的数据代理

通过 vm 对象来代理 data 对象中属性的操作（读/写)

2、Vue 中数据代理的好处

更加方便的操作 data 中的数据

3、基本原理

通过object.defineProperty()把 data 对象中所有属性添加到 vm 上，为每一个添加到 vm 上的属性，都指定一个getter/setter 在getter/setter内部去操作（读/写）data 中对应的属性

理解MVVM和数据代理

MVVM

Object.defineProperty

数据代理

vue 中的数据代理