前言
关于vue2.0响应式原理，应该都清楚是使用了defineProperty的get()与set()属性，今天结合代码将其响应式原来重新梳理一遍。
关于defineProperty
Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Object.defineProperty(obj, prop, descriptor)
参数
- obj
要在其上定义属性的对象。 - prop
要定义或修改的属性的名称。 - descriptor
将被定义或修改的属性描述符。
其中descriptor有两种主要形式：数据描述符和存取描述符。数据描述符是一个具有值的属性，该值可能是可写的，也可能不是可写的。存取描述符是由getter-setter函数对描述的属性。
如果一个描述符不具有value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。
对于object的数据劫持
function updateView(){
console.log('视图更新');
}
function defineReactive(target,key,value){
Object.defineProperty(target,key,{
get(){
return value
},
set(newValue){
if(newValue!==value){
updateView();
value=newValue
}
}
})
}
function observe(target){
if(typeof target!=='object'||target===null){
return
};
for(let key in target){
defineReactive(target,key,target[key])
}
}
let data={name:'1'};
observe(data);
data.name=2;
console.log(data.name);
//视图更新
//2
以上代码是最简单的对于object的数据劫持，但是会发现当object里面还有对象时候是坚持不到变化的，这是因为此时只是对最外层数据进行了数据劫持，因此还需要在defineReactive内使用递归调用observe()方法,同时可以在set()方法内调用observe()方法
function updateView(){
console.log('视图更新');
}
function defineReactive(target,key,value){
observe(value);
Object.defineProperty(target,key,{
get(){
return value
},
set(newValue){
if(newValue!==value){
observe(newValue)
updateView();
value=newValue
}
}
})
}
function observe(target){
if(typeof target!=='object'||target===null){
return
};
for(let key in target){
defineReactive(target,key,target[key])
}
}
let data={name:'1',age:{count:2},money:{count:2}};
observe(data);
data.age.count=3;
data.money={count:3}
console.log(data.age.count);
console.log(data.money.count)
视图更新
视图更新
3
3
同时大家知道defineProperty没法对数组长度进行监控，因此需要重写Array的'push','pop','shift','unshift','unshift','splice','sort','reverse'进行重写
let oldArrayPrototype=Array.prototype;
let proto=Object.create(oldArrayPrototype);
['push','pop','shift','unshift','unshift','splice','sort','reverse'].forEach(method=>{
proto[method]=function(){
updateView();
oldArrayPrototype[method].call(this,...arguments);
}
})
function updateView(){
console.log('视图更新');
}
function defineReactive(target,key,value){
observe(value);
Object.defineProperty(target,key,{
get(){
return value
},
set(newValue){
if(newValue!==value){
observe(newValue)
updateView();
value=newValue
}
}
})
}
function observe(target){
if(typeof target!=='object'||target===null){
return
};
if(Array.isArray(target)){
Object.setPrototypeOf(target,proto);
}
for(let key in target){
defineReactive(target,key,target[key])
}
}
let data={name:'1',age:[1,2]};
observe(data);
data.age.push(2);
console.log(data.age);
//视图更新
//[ [Getter/Setter], [Getter/Setter], 2 ]
写在最后
大家应该发现使用defineProperty存在的问题
- 一上来会使用递归便利所有属性，如果嵌套很深，那效率会比较低。
- 对于没有定义的数据，没法检测其变化
- 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应
为了弥补defineProperty存在的问题，vue3.0使用proxy替代defineProperty，一会再写一篇关于vue3.0双向绑定的原理文章。
