Vue 3.0 给我们带来哪些惊喜（2）- 的监听系统的实现

目标

让大家更好地理解 vue 3.0 中对性能进行优化的机制

参考尤雨溪的有关 vue 3.0 中性能提升和新特性的分享

监听系统所涉及的技术

vue 3.0 的目标

• 更快
• 更小
• 更容易维护
• 更容易和 native 集成，更好的多端支持
• 让开发更轻松

相关文档

Vue 3.0 给我们带来哪些惊喜（1）- 更快虚拟DOM渲染

深入AngularJS源码，写自己的 JngularJS（1）
深入AngularJS源码，写自己的 JngularJS（2）
深入AngularJS源码，写自己的 JngularJS（3）

监听系统

• 观察者模式
• getter 和 setter
• proxy
  在 vue3.0 中使用全新的监听系统，抛弃原有通过 getter 和 setter 实现监听系统。

通过 setter 和 getter 实现的监听系统

因为 vue 是通过 es5吧，我还不去的定的新特性 setter 和 getter 实现监听系统，所以并不支持那些叫老的 IE 浏览器

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
language.current = 'FA';

console.log(language.log);

通过 proxy 实现的监听系统

什么是proxy

在 es6 可以通过 proxy 来修改一个对象的属性的查找、赋值和枚举等。

var p = new Proxy(target, handler);

• target 表示一个要代理的对象
• handler 修改对象的基本属性。

var handler = {
    get: function(obj, prop) {
        return prop in obj ?
            obj[prop] :
            37;
    }
};

var p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;

console.log(p.a, p.b); // 1, undefined
console.log('c' in p, p.c); // false, 37

proxy 的应用

我们可以通过 proxy 来实现验证

let validator = {
  set: function(obj, prop, value) {
    if (prop === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    obj[prop] = value;

    // Indicate success
    return true;
  }
};

let person = new Proxy({}, validator);

person.age = 100;
console.log(person.age); // 100
person.age = 'young'; // Throws an exception
person.age = 300; // Throws an exception

通过 proxy 来简单地实现一个监听系统。

const arrayChangeHandler = {
    get: function(target,prop){
        console.log('getting ' + prop + ' for ' + target);
        return target[prop];
    },
    set: function(target, prop, value, receiver) {
        console.log('setting ' + prop + ' for ' + target + ' with value ' + value);
        target[prop] = value;
        // 返回 true 表示接受对 prop 的更改
        return true;
      }
}

定义一个数组，我们 proxy 来代理创建的数组，然后复写 setter 方法，我们可以在setter 中做一些手脚达到目的。

let originalArray = [];
let oberservableArr = new Proxy(originalArray,arrayChangeHandler);
oberservableArr.push('elem1');
oberservableArr.push('elem2');
oberservableArr.push('elem3');

打印输出，当我们对数据进行更改时，可以通过 rxjs 或 xtream 发送事件，这样当那些对数据关系视图或数据通过注册事件就可以实时收到消息进行更新，这样就完成了监听系统。而且这个监听系统可以是 lazy 的，局部的。

getting push for elem1
getting length for elem1
setting 1 for elem1 with value elem2
setting length for elem1,elem2 with value 2
getting push for elem1,elem2
getting length for elem1,elem2
setting 2 for elem1,elem2 with value elem3
setting length for elem1,elem2,elem3 with value 3

要深入理解 proxy 可以实现元编程
javascript 中的自动化—元编程（上）
javascript 中的自动化—元编程（中）
javascript 中的自动化—元编程（下）