观察者模式核心：
    观察者（Watcher）：每个观察者都必须有一个Update()方法。事件发生的时候，触发并执行观察者的Update()方法。类似于发布/订阅者中的订阅者
    目标（ Dependency 依赖）：类似于发布/订阅者中的发布者

    1. subs数组：存储所有的观察者
    2. addSub()：添加观察者
    3. notify()：当事件发生时，调用所有观察者的update()，达到发布目的。

    在Vue 中应用就是视图的实时更新

    • 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。 image.png
      • Vue组件的data并非所有属性都会收集为依赖，而是被模板引用的属性才会收集为依赖
      • 当渲染模板时,msg将会触发getter函数，即收集依赖的地点就是在getter中。
      • 在某种情况下对msg进行了重新赋值，那么将会触发setter函数，既然msg改变了，那么视图就要更新了，即通知更新的地点在setter中
      • 如何通知更新？在setter中使用dep的notify方法通知Watcher，即调用观察者的update方法，使得组件重新渲染。



    观察者类实现

    1. <!-- 观察者模式 -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>观察者模式</title>
    8. </head>
    9. <body>
    10.   <script>
    11.     class Dep{
    12.       constructor() {
    13.         this.subs = []
    14.       }
    15.       addSub(sub) {
    16.         // 所有观察者都应有update
    17.         if(sub&&sub.update){
    18.           this.subs.push(sub)
    19.         }
    20.       }
    21.       notify() {
    22.         this.subs.forEach(item =>{
    23.           item.update(item)
    24.         })
    25.       }
    26.     }
    27.     //观察者类
    28.     class Watcher{
    29.       update(item){
    30.         console.log(item)
    31.         console.log('update')
    32.       }
    33.     }
    35.     let watcher1 = new Watcher();
    36.     let watcher2 = new Watcher();
    37.     let dep = new Dep();
    39.     dep.addSub(watcher1);
    40.     dep.addSub(watcher2);
    41.     setTimeout(()=>{
    42.       dep.notify();
    43.     },3000)
    44.   </script>
    45. </body>
    46. </html>