Vue源码解析之（computed&watch&观察者模式）

前言：好久没写博客了，今年确实有点小忙，学习跟工作都很充实，身边也有小伙伴也经常说：技术是学不完的，能不能专一搞点自己喜欢的东西呢？学完新技术然后过几年又没了，岂不是白学了呢？ 哈哈～ 说的确定有一点道理啊，但是没办法啊，新技术还是得去了解啊，至少要去看看别人的文档跟设计思想吧，也不怕小伙伴笑哈，最近还在补js跟css基础知识，学无止境，加油吧～骚年！

前面有写过两篇vue的源码的文章，有兴趣的童鞋可以去看看，Vue源码解析(一)、Vue源码解析二(render&mount)接触vue也有蛮长一段时间了，不得不说，vue的设计思想跟整体架构还是很牛逼的，所以带着崇拜跟学习的心态我们一起看看vue的computed跟watch属性。

一、观察者模式

在说computed跟watch之前，我们先来认识一种设计模式 “观察者模式”，观察者模式分为“Subject主题”、"Observer观察者 "，在此种模式中，一个目标物件管理所有相依于它的观察者物件，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实现事件处理系统。

字面意思比较抽象，我们直接上代码，还记得在大学的时候老师就讲过“观察者模式”，虽然举的例子不很贴切，但是还算是比较好的诠释，老师跟我们讲了一个 “小美与她的两个男盆友” 的故事。

第一步：定义subject

export default class Subject {
   
    constructor(name,desc) {
   
        this.name = name;
        this.desc = desc;
    }
    add() {
   
        throw new Error("this method should be overrided！！");
    }

    notify() {
   
        throw new Error("this method should be overrided！！");
    }

    cry() {
   
        throw new Error("this method should be overrided！！");
    }
}

第二步：定义Observer

export default class Observer {
   
    constructor(name,desc) {
   
        this.name = name;
        this.desc = desc;
    }

    say() {
   
        throw new Error("this method should be overrided！！");
    }
}

第三步：定义具体的subject对象（girl女孩）

import ISubject from './Subject';

export default class Girl extends ISubject {
   
    constructor(name, desc) {
   
        super(name, desc);
        this.boys = [];
    }

    add(boy) {
   
        this.boys.push(boy);
    }

    notify() {
   
        this.boys.forEach((boy) => {
   
            boy.say();
        });
    }

    cry() {
   
        console.log(this.name + " : " + this.desc);
        this.notify();
    }
}

第四步：定义具体的observer对象（boy男孩）

import Observer from './Observer';

export default class Boy extends Observer {
   
    constructor(name, desc) {
   
        super(name, desc);
    }

    say() {
   
        console.log(this.name + ": " + this.desc);
    }
}

测试：

import Girl from './Girl';
import Boy from './Boy';

const girl1 = new Girl("小美", "今天心情很不好，哄不好的那种～");

const boy1 = new Boy("小黑", "亲爱的，你购物车需要清一下了！");
const boy2 = new Boy("小白", "Darling 逛街去！");

girl1.add(boy1)