Proxy和defineProperty实现数据观察（观察者模式）

前言

说到vue的原理，大家都知道是通过defineProperty实现对数据的的观察，也知道vue3.0改成了Proxy。关于代理模式（其实也是一种设计模式），最新es6 有实现代理的方法，即我们可以用Proxy。

关于Proxy，文档还是阮一峰老师的es6,可以结合reflect一起学习。这里就不多用语言来描述了。

defineProperty

我们知道，vue中，有$set方法来强制视图更新，当然也有数组的一些操作。其实这是defineProperty 来观察对象或者数组的一些缺陷。简单实现一个defineProperty观察数据的方法。

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 = 'haorooms前端博客';

//欢迎大家来到haorooms前端博客
//"haorooms前端博客"

这样就实现了对people的观察

Proxy

用代理模式Proxy实现观察者

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 = 'haorooms前端博客已经有';

打印出

haorooms前端博客已经有, 5年了
"haorooms前端博客已经有"

两种方式实现对数据的观察，具体细节大家还要细细琢磨！