黑马程序员技术交流社区

标题: 【上海校区】Proxy和defineProperty实现数据观察（观察者模式） [打印本页]

---

作者: chennaiweng    时间: 2019-6-20 21:21
标题: 【上海校区】Proxy和defineProperty实现数据观察（观察者模式）
前言

说到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

用代理模式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

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2