vue 数据代理

• 先认识一下MVVM 模型

 

• M：模型(Model) ：data中的数据
• V：视图(View) ：模板代码
• VM：视图模型(ViewModel)：Vue实例
• 总结：

1.  Vue构造函数 所管理的 data 函数中所有的属性，最终都会出现在 vm 实例身上
2.  vm 身上的所有属性 以及 Vue 原型上的所有属性，在 Vue 模板语法中均可以直接使用
    

•  数据代理原理 | Object.defineProperty(obj, prop, descriptor)

/*
    Object.defineProperty(obj, prop, descriptor)
    obj：要定义属性的对象。
    prop：要定义或修改的属性的名称
    descriptor：要定义或修改的属性描述符
*/
let Persion = {
    name:'zhangsan',
    sex:'男'
} 
let number = 0
Object.defineProperty(Persion,'age',{
    // value:18,
    // writable: true, // 如果为 true，则值可以被修改，否则它是只可读的
    // enumerable: true,// 如果为 true，则表示是可以遍历的，可以在for… .in Object.keys()中枚举出来
    // configurable: true // 如果为 true，则此属性可以被删除，这些特性也可以被修改，否则不可以
    // gte()函数（getter）会在 Persion 对象指定属性被访问时调用，且返回值为指定属性（此处为 age 属性）的值
get:function() {
    console.log('Persion.age 被访问了');
    return number
},
// set()函数（setter）会在 Persion 对象指定属性被修改时调用，且会收到具体的修改值
set:function(value) {
    console.log('Persion.age 将被修改，值为',value);
    number = value
    console.log('Persion.age --- ',Persion.age);
}
})
console.log(Persion);
console.log(Object.keys(Persion)); // Object.keys() 以数组形式返回参数对象的属性名

• 实现简单数据代理 | 单向绑定

let obj1 = { x:1 }
let obj2 = { y:2 }
Object.defineProperty(obj2,'x',{
    set(value) {
    obj1.x = value
},
get() {
    return obj1.x
}
})