vue2.x 使用 Object.defineProperty() 实现数据的响应
原理：
递归遍历 data 中的数据，使用 Object.defineProperty() 劫持 getter 和 setter，在 getter 中做数据依赖收集处理，在 setter 中监听数据的变化，并通知订阅当前数据的地方。
缺点：
- 检测不到对象属性的添加和删除：当你在对象上新加了一个属性 newProperty，当前新加的这个属性并没有加入 vue 检测数据更新的机制(因为是在初始化之后添加的)。
vue.$set是能让 vue 知道你添加了属性, 它会给你做处理，$set内部也是通过调用Object.defineProperty()去处理的。 - 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。
- 当 data 中数据比较多且层级很深的时候，会有性能问题，因为要遍历 data 中所有的数据并给其设置成响应式的。
let childObserve = !shallow && observe(val)
// 对 data 中的数据进行深度遍历，给对象的每个属性添加响应式
Object.defineProperty(obj, key, {
// 当且仅当 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
enumerable: true,
// 当且仅当 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false
configurable: true,
// 当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的 this 并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值。默认为 undefined。
get: function reactiveGetter() {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// 进行依赖收集
dep.depend()
if (childObserve) {
childObserve.dep.depend()
if (Array.isArray(value)) {
// 是数组则需要对每一个成员都进行依赖收集，如果数组的成员还是数组，则递归。
dependArray(value)
}
}
}
return value
},
// 当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined。
set: function reactiveSetter(newVal) {
const value = getter ? getter.call(obj) : val
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
if (process.env.NODE_ENV !== 'production' && customSetter) {
customSetter()
}
if (getter && !setter) return
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
// 新的值需要重新进行 observe，保证数据响应式
childObserve = !shallow && observe(newVal)
// 将数据变化通知所有的观察者
dep.notify()
}
})
Proxy
代理，可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，必须经过这层拦截。意味着你可以在这层拦截中进行各种操作。比如你可以在这层拦截中对原对象进行处理，返回你想返回的数据结构。
ES6 原生提供 Proxy 构造函数，MDN 上的解释为：Proxy 对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。
const p = new Proxy({}, {
get(target, propKey) {
return target[propKey];
},
set(target, propKey, value) {
if (propKey === 'name') {
throw new TypeError('name属性不允许修改');
}
// 不是 name 属性，直接保存
target[propKey] = value;
}
});
p.name = 'proxy'; // Uncaught TypeError: name属性不允许修改
p.a = 111;
console.log(p.a); // 111
vue3.0 使用 Proxy 实现数据的响应
Reflect(ES6引入) 是一个内置的对象，它提供拦截 JavaScript 操作的方法。将 Object 对象一些明显属于语言内部方法（比如 Object.defineProperty() ）放到 Reflect 对象上。修改某些 Object 方法的返回结果，让其变得更合理。让 Object 操作都变成函数行为。
2.x
class Observer {
constructor(data) {
// 遍历参数 data 的属性，给添加到 this 上
for(let key of Object.keys(data)) {
if(typeof data[key] === 'object') {
data[key] = new Observer(data[key]);
}
Object.defineProperty(this, key, {
enumerable: true,
configurable: true,
get() {
console.log('你访问了' + key);
return data[key];
},
set(newVal) {
console.log('你设置了' + key, '新的' + key + '=' + newVal);
if(newVal === data[key]) {
return;
}
data[key] = newVal;
}
})
}
}
}
const obj = {
name: 'app',
age: '18',
a: {
b: 1,
c: 2,
},
}
const app = new Observer(obj);
app.age = 20;
console.log(app.age);
app.newPropKey = '新属性';
console.log(app.newPropKey);
3.0
const obj = {
name: 'app',
age: '18',
a: {
b: 1,
c: 2,
},
}
const p = new Proxy(obj, {
get(target, propKey, receiver) {
console.log('你访问了' + propKey);
return Reflect.get(target, propKey, receiver);
},
set(target, propKey, value, receiver) {
console.log('你设置了' + propKey, '新的' + propKey + '=' + value);
Reflect.set(target, propKey, value, receiver);
}
});
p.age = '20';
console.log(p.age);
p.newPropKey = '新属性';
console.log(p.newPropKey);
p.a.d = '这是obj中a的属性';
console.log(p.a.d);
网友评论