Vue原理——响应式原理

总结：

数据本来通过.属性的方式获取，=的方式赋值。而vue响应式则通过Object.defineProperty将数据的修改和获取变成set 和 get 操作。在set和get调用时就能进行一些其他的操作，从而实现响应式。

vue2 的响应式处理操作有一些缺点，vue3中通过proxy可以解决，但还是有些兼容性的问题。所以vue2还是得存在一段时间。

如何监听一个对象，以下为参考代码：

// 监听对象，使用Object.defineProperty ,执行响应式操作


let obj = {
    name: 'lisi',
    age: 99,
    isMarry:false,
    job: {
        name:'study sports',
        project: {
            top: 1
        }
    }
}

//监听对象属性
function listenerObjectProperty(obj) {
    for(let p in obj) {
        let value = obj[p]
        if(typeof value === 'object') {
            listenerObjectProperty(value)
        }
        Object.defineProperty(obj,p,{
            set:function(val) {
                if(value !== val){
                    responseOperate()
                    p = val
                }
            },
            get:function() {
                return value
            }
       })
    }
}

//监听对象
function definePropertyOperate(obj,p,value) {
    
}

//响应操作
function responseOperate() {
    console.log("数据改变后执行此操作")
}

console.log("hello")
listenerObjectProperty(obj)

obj.name = 'wangwu'
obj.age = 888
obj.isMarry = true


obj.job.name = 'study English'
obj.job.project.top = 2