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可以监听数组,因此不用再单独对数组进行特殊处理