Vue2.0与vue3.0响应式对比

Vue2.0 响应式原理
主要api------Object.defineProperty
(需要对数组相关方法进行重写;数组改变length无效；对象不存在的属性不能被拦截
)

• 主要时对对象的属性做一些限制，是否可以被访问，被修改，被枚举等等；
• 访问这个属性，会触发get方法
• 修改这个属性，会触发set方法
• 定义了get 方法，若没有return值出去，则访问该属性时，得到的会是undefined
• 需要借助一个中间变量去存贮_value; 不优雅的地方；

var ob={
     
  a:1,
  b:2
}
var _value=ob.a;
Object.defineProperty(ob,'a',{
     
  get:function(){
     
    return _value;
  },
  set:function(newVal){
     
    _value= newVal;
    return _value
  }
})
console.log(Object.getOwnPropertyDescriptor(ob,'a'));
console.log(ob.a);
ob.a = 5
console.log(ob.a);

简单流程演示

vue3.0 改用proxy

两者对比：
defineProperty 只能监听某个属性，不能对全对象进行监听
因此，proxy可以省去for循环过程，提升效率
proxy可以监听数组，因此不用再单独对数组进行特殊处理