vue2一些原理

一、MVVM

vue 中的 MVVM 模型，其本质即 M,V,VM 等组成的数据与视图模型

二、数据代理

深入理解响应式原理：https://cn.vuejs.org/v2/guide/reactivity.html#ad

用法：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：Object.defineProperty(obj, prop, descriptor)

第一个参数：要定义属性的对象。
第二个参数：要定义或修改的属性的名称或 Symbol
第三个参数：要定义或修改的属性描述符。

let number = 18；
let person= {
    name:"张三"，
    sex: "男"，
   // age:18       //方式一
}


方式二：
Object.defineProperty(person,'age'),{
    value:18
}


console.log(Object.keys())

通过方式二定义的age值，默认是是不能遍历的。
如果需要属性可枚举，可以在其中配置属性enumerable
如果需要属性可被修改，可以在其中配置属性writable
如果需要属性可被修改，可以在其中配置属性configurable
高级的配置：

Object.defineProperty(person,'age'),{
    //value:18，
   // enumerable:true,// 控制属性是否可以枚举，默认值是false
    //writeable:true, // 控制对象的属性是否可以被修改，默认值是false
    // configurable:true, // 控制对象的属性是否可以被删除，默认值是false
    

    // 当有人读取person的age属性时，get函数（一般被称为getter）就会被调用，且返回值就是age的值
     get：function() {
         return number
     }
      
    // 当有人读取person的age属性时，set函数（一般被称为setter）就会被调用，且返回值就是age的值
     set：function(value) {
         number = value
         return value
     }
}

数据代理的定义：通过一个对象对另一个对象中属性的操作（读，写）

let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,'x',{
    get() {
        return obj.x
    },
    set(value) {
       obj.x = value
    }
})

Vue中的数据代理

在定义好的Vue实例vm中有 _data 属性对象，实例化过程中data对象中预先定义的name，address会加入到 _data 中，即_data可以代理data中的属性值，获取data.name,也可以通过data.name = “123”
触发_data.name的值发生改变

即现在有两个对象 _data, data

Object.defineProperty(_data,'name',{
    get() {
        return data.name
    }

    set(value) {
         data.name = value
    }
})

_data中的会触发页面的数据实时更新，所以当实例化过程中的定义的data对象中的属性值发生变化时，需要监听，来修改_data从而触发视图层的更新。

Vue更新数据遇到的问题

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

https://cn.vuejs.org/v2/guide/reactivity.html#%E5%AF%B9%E4%BA%8E%E5%AF%B9%E8%B1%A1