vue2.0与3.0响应式的区别总结

vue3中数据的响应式是ES6的新属性：proxy，下面举个例子：

let user={name:'ps',age:24}
let p=new Proxy(user,{
//读取操作，target就是监听的源数据，proName是属性名
get(target,proName){
//返回当前读取的值
return target[proName]
}
//修改操作target就是监听的源数据，proName是属性名，value修改后的值
set(target,proName,value){
//修改源数据
target[proName]=value
}
//删除
deletProperty(target,proName){
return delete target[proName]
}
})

vue2中对对象类型做数据劫持

使用 Object.defineProperty 方法添加对象，重写了原有的 get 和 set 方法，bject.defineProperty()接受三个参数。

obj：要定义属性的对象。
prop：要定义或修改的属性的名称
descriptor：要定义或修改的属性描述符，分为数据描述符和访问器描述符。

数据描述符

1. configurable：是否可删除
2. enumerable：是否可枚举
3. value：属性值
4. writable：是否可编辑
5. get(),set()

Object.defineProperty(obj, prop, descriptor);

举例

let obj = {};
let baseValue = 10
Object.defineProperty(obj,'a',{
    //是否可枚举
    enumerable:true,
    //是否可删除
    configurable:true,
    get(){
        //访问a
        return baseValue;
    },
    set(value){
        //修改a
        baseValue = value;
    }
})
console.log(obj.a);  //访问a元素  10
obj.a = 100;         //更改后a的值为：100
console.log(obj);   //{a:100}

弊端就是给对象新增属性的时候监听不到，因为defineProperty只给已经有的a属性加上了监听，新增的没有，可以使用vue.set(target, propertyName/index, value )

采取$forceUpdate() (不建议)