|
前言 说到vue的原理，大家都知道是通过defineProperty实现对数据的的观察，也知道vue3.0改成了Proxy。关于代理模式（其实也是一种设计模式），最新es6 有实现代理的方法，即我们可以用Proxy。 defineProperty我们知道，vue中，有$set方法来强制视图更新，当然也有数组的一些操作。其实这是defineProperty 来观察对象或者数组的一些缺陷。简单实现一个defineProperty观察数据的方法。 [JavaScript] 纯文本查看 复制代码 const person = {
name: 'haorooms',
age: 20
};
Object.keys(person).forEach(function(key) {
Object.defineProperty(person, key, {
enumerable: true,
configurable: true,
get: function() {
console.log('get');
},
set: function(newVal) {
// 当属性值发生变化时我们可以进行额外操作
console.log(`欢迎大家来到${newVal}`);
},
});
});
person.name = '前端';
用代理模式Proxy实现观察者 [JavaScript] 纯文本查看 复制代码 const queuedObservers = new Set();
const observe = fn => queuedObservers.add(fn);
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
queuedObservers.forEach(observer => observer());
return result;
}
const person = observable({
name: 'haorooms',
age: 5
});
function print() {
console.log(`${person.name}, ${person.age}年了`)
}
observe(print);
person.name = 'cxk已经';本帖转自：https://www.haorooms.com/post/data_proxy_defineproperty
| 
收藏
淘帖
踩
