公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

Proxy和defineProperty實現數據觀察(觀察者模式)

914次瀏覽

前言

說到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前端博客已經有"

兩種方式實現對數據的觀察,具體細節大家還要細細琢磨!

相關文章:

任选9场吧 既可以看书也可以赚钱的应用 天龙八部3刷副本赚钱 如何知道项目是否赚钱 八闽掌上麻将下载 微信手机上下分打鱼能赚钱的 永恒之塔魔族单人赚钱 金蟾捕鱼 侠盗猎车出租车赚钱 彩金捕鱼鱼币换红包 加盟快递代理点赚钱吗 好彩头彩票苹果 男人说带你一起赚钱 内蒙古扑克玩法 扣篮团队怎么赚钱 梦想世界几最赚钱 求女主脱籍 赎身 卖东西赚钱的文