🌰

  • 例如你在星巴克点了咖啡，此时你并不需要在吧台坐等，你只需要回到位子上玩手机，等咖啡好了服务员会叫你。不光叫你，其他人的咖啡好了，服务员也会叫他们来取
  • DOM事件，注册完之后就不用管了，什么时候事件触发了，就会执行里面的code

  • 生命周期图示

    演示

    ```typescript // 主题 class Subject { private state: number = 0 private observers: Observer[] = []

    getState(): number { return this.state }

    setState(newState: number): void { this.state = newState; this.notify(); }

    attach(observer: Observer): void { this.observers.push(observer); }

    private notify() { this.observers.forEach(observer => {

    1. observer.update(this.state);

    }) } }

// 观察者 class Observer { name: string constructor(name: string) { this.name = name; } update(state: number) { console.log(观察者${this.name}接到了通知，内容是${state}) } }

const sub = new Subject(); const observer_1 = new Observer(‘A’); const observer_2 = new Observer(‘B’);

sub.attach(observer_1); sub.attach(observer_2); sub.setState(20);

// 执行结果 // ‘观察者A接到了通知，内容是20’ // ‘观察者B接到了通知，内容是20’

  1. ![](https://cdn.nlark.com/yuque/0/2022/jpeg/1670861/1656868896728-9833117e-60b2-437a-80db-ed7baa0c688f.jpeg)<br />**是否符合设计原则**
  3. - Observe 和 Subject 分离，解耦
  4. - Observer 可以自由扩展
  5. - Subject 可自由扩展
  6. <a name="A8Geh"></a>
  7. # 场景
  9. - DOM 事件
  10. - Vue React 组件生命周期
  11. - Vue watch
  12. - Vue 组件更新过程
  13. - 各种异步回调
  14. - MutationObserve
  15. <a name="qToS4"></a>
  16. ## DOM 事件
  17. ```html
  18. <button id="btn1">btn</button>
  20. <script>
  21.   const $btn1 = $('#btn1');
  22.   $btn1.click(function () {
  23.     console.log(1);
  24.   })
  25.   $btn1.click(function() {
  26.     console.log(2);
  27.   })
  28. </script>

vue watch

  1. {
  2.   data() {
  3.     name: '双越',
  4.     info: {
  5.       city: 'BeiJing'
  6.     }
  7.   },
  8.   watch: {
  9.     name(newVal, val) {
  10.       console.log(newVal, val);
  11.     },
  12.     // 或者
  13.     name: {
  14.       handler(newVal, val){
  15.         console.log(newVal, val);
  16.       },
  17.       immediate: true // 初始化就会触发
  18.     },
  19.     info: {
  20.       handler(newVal, val) {
  21.         console.log(newVal, val);
  22.       },
  23.       deep: true // 深度监听
  24.     }
  25.   },
  26.   methods: {
  27.     changeName() {
  28.       this.name = '双越.name' + new Date().getTime();
  29.     }
  30.   }
  31. }
  1. <script setup>
  2. import { ref, watch, watchEffect, reactive } from 'vue';
  4. const nameRef = ref('双越');
  5. const state = reactive({info: { city: '北京' }})
  7. watch([nameRef], (newVals, vals) => {
  8.   console.log('name', newVals, vals);
  9. });
  11. watch(() => state, () => {
  12.   console.log(state.info.city)
  13. }, {
  14.   deep: true
  15. })
  17. watchEffect(() => { // 会立即触发
  18.   console.log(nameRef.value)
  19. })
  21. function changeName() {
  22.   nameRef.value = Date.now();
  23. }
  24. </script>
  26. <template>
  27.   <p>name: {{ nameRef }}</p>
  28. <button @click="changeName">change name</button>
  29. </template>

Vue 组件更新过程

image.png

各种异步回调函数

  • 定时器 setTimeout setInterval
  • Promise.then
  • Nodejs - stream readline httpServer