vue2 | 啤啤熊

`defineProterty`

Object.defineProperty JS中的一个方法，常用来定义属性的，在Vue.2x中的数据代理，是通过此方法来实现的!

参数

name	desc
targetObj	目标对象
add property	添加的属性
options	配置项

options 配置项

key	valType	defaultVal	desc
value	any type	‘18’ or 18 or ‘年龄’	为目标对象定义的属性值
enumerable	Boolean	false	控制属性是否可枚举,默认不能
writable	Boolean	false	控制属性是否可修改,默认不可被修改
configurable	Boolean	false	控制属性是否能被删除,默认不能
setter	Function	callback(val)	设置新的属性值
getter	Function	-	获取属性值

使用

let number = 19
let targetObj = {
    name: '李四',
    sex: '男'
}

Object.defineProperty( targetObj, 'age', {
    value: '18', // 设置的属性值
    enumerable: true,
    writable: true,
    configurable: true,
    set: function(val) {
        // val 修改的新值
        console.log('当有人修改了 age 属性时, 该函数被触发调用') // 值被改变了
        number = val
    },
    get: function() {
        console.log('当有人读取了 age 属性时，该函数被触发调用') // 
        return number
    }
})

数据代理

定义
通过一个对象代理，去视图（==修改== or ==访问==）另一个对象中的属性
案例

let obj1 = { x: 1 }
let obj2 = { y: 2 }

// obj2 视图 去访问或者修改 obj1 中的 x属性
Object.defineProperty(obj2, 'x', {
    get() {
        return obj1.x
    },
    set(val) {
        obj1.x = val   
    }
})

Vue中的数据代理

vm 实例对象可以视作为以上案例的 ==obj2==，则 ==_data==可视作为 ==obj1==,当你视图去 ==访问== or ==修改== vm实例[obj2]对象的属性时，则相应的 _data[obj1]对象下的属性值也会被修改!

let vm = new Vue({
    el: '#app',
    data:{  // data 所对应的 _data对象，vue 会把这个对象中的属性，当做自身属性来使用
        y: 1
    }
})

console.log('vm', vm)
// vm 中有一个 _data 对象，这个对象所对应的 就是 vm 实例中的 data 对象

`MVVM`模型

==MVVM== 视图模型，一种规范，其中 ==M==为[model]也就是模型数据，在vue中主要体现在==data==
==VM== 则为[ViewModel] 视图模型的意思，作用于 model 于 view之间数据转换
==V== 则为[view] 视图，主要体现在 <template>模板中，用来和用户做交互的

M - > data
VM - > vue实例
V -> html

defineProterty

数据代理

Vue中的数据代理

MVVM模型

`defineProterty`

`MVVM`模型