vue2原理
vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。
Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性,最终返回这个对象。
参数:
参数一 obj:被定义或修改属性的对象;
参数二 prop:要定义或修改的属性名称;
参数三 descriptor:对属性的描述;
返回值:
函数将返回传递给他的obj对象本身。
示例:
//age_num、person是两个东西,靠Object.defineProperty来关联
let age_num = '10';
let person = {
name:"小帅",
sex:"男",
age:18
}
Object.defineProperty(person,"age",{
//当有人读取person的age属性的时,get函数(getter)就会调用,且返回的是age的值
get:function(){
console.log('读取age属性了');
return age_num;
},
// 当有人读取person的age属性的时,set函数(setter)就会调用,且返回的是age的值
set(value){
//这里就是绑定
age_num = value;
}
})
for(let key in person){
console.log('@',person[key]);
}
console.log(person);
打印结果
Object.defineProperty的缺点
深度监听需要一次性递归 (遍历每个对象的每个属性,如果对象嵌套很深的话,需要使用递归调用。)
无法监听新增属性/删除属性(Vue.set Vue.delete,未在 data 中定义的属性会报 undefined)
无法原生监听数组,需要特殊处理
vue3原理
Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象。基本语法const obj = new Proxy(target, handler),被代理之后返回的对象 = new Proxy(被代理对象,要代理对象的操作)
示例
const obj = {
name: "小帅",
age: 18,
address: "成都",
};
const ObjProxy = new Proxy(obj, {
set: function (target, key, newValue, receiver) {
// 第一种写法:监听到某个属性名新值就赋值给原对象的某个属性名
// target[key] = newValue;
// 第二种写法:也是vue3源码的写法,利用Reflect.set来实现监听新值
Reflect.set(target, key, newValue);
console.log(`监听:监听到${target[key]}的值已经被修改成了`, newValue);
},
get: function (target, key, receiver) {
console.log(`监听:${key}属性被读取了`);
// 第一种写法
// return target[key];
// 第二种写法
return Reflect.get(target, key, receiver);
},
});
//对这个代理对象进行值修改
ObjProxy.name = "小美";
//读取原对象看看是否修改成功
console.log(obj);
打印结果
proxy 优缺点总结
规避了 Object.definedProperty的问题(可以监听数组,不用再去单独的对数组做特异性操作,vue3可以检测到数组内部数据的变化。)
proxy 无法兼容所有浏览器