vue的数据更新原理

vue的数据更新原理，之前并没有系统的学习vue的原理，大概看过一些面试题知道Object.defineProperty这个属性，直接给obj赋值不是更加简单？通过mdn的相关资料知道，该方法还有多个隐藏的属性，例如是否可写，false时，你改变其值也是更改不成功的，是否可以枚举，遍历obj时候可以不遍历

var obj = {};

Object.defineProperty(obj,"a",{
    value:3,
    // 是否可写
    writable:true,
    // 是否可以枚举
    enumerable:true
})
Object.defineProperty(obj,"b",{
    value:4
})

obj.a++
console.log(obj,obj.a);//value+1即4

for(var k in obj){
    console.log(k)//a
}

其实访问就是调用其get函数

var obj = {};

Object.defineProperty(obj,"a",{
    get(){
        console.log('访问a的get函数')
    }
})
Object.defineProperty(obj,"b",{
    value:4
})
obj.a

改变a的值会调用set函数

var obj = {};

Object.defineProperty(obj,"a",{
    get(){
        console.log('访问a的get函数')
    },
    set(){
        console.log('改变a的值')
    }
})
Object.defineProperty(obj,"b",{
    value:4
})
obj.a++

但是get和set需要变量周转

var obj = {};
var temp
Object.defineProperty(obj,"a",{
    get(){
        console.log('访问a的get函数')
        return temp
    },
    set(newValue){
        console.log('改变a的值')
        temp = newValue
    }
})
Object.defineProperty(obj,"b",{
    value:4
})
console.log(obj.a)
obj.a=9
obj.a++
console.log(obj.a)

defineReactive是构建一个闭包环境，用来解决get和set的变量周转

var obj = {};

function defineReactive(data,key,val){
    //val是闭包
    Object.defineProperty(data,key,{
    get(){
        console.log('访问a的get函数')
        return val
    },
    set(newValue){
        console.log('改变a的值')
        val = newValue
    }
})
}

defineReactive(obj,'a',10)

console.log(obj.a)//10
obj.a=69
obj.a++
console.log(obj.a)//70