Proxy和defineProperty实现数据观察（观察者模式）说到vue的原理，大家都知道是通过defineProp

前言

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