国产原创剧情在线,狠狠干2022,国产农村三片免费网站

前端開發：深入了解Vue數據響應式原理

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

2024年4月26日 12:6 本文熱度 730

Vue的響應式原理是基于發布訂閱模式實現的。所以先來了解一下發布訂閱模式【Publish-Subscribe Pattern】

了解前端常見的兩種設計模式

發布-訂閱模式 Publish-Subscribe Pattern

由發布者Publisher、訂閱者列表Subscriber、消息隊列/調度中心Event Channel組成的形式。發布者Publisher和訂閱者Subscriber之間是互不相識，不直接通信交流的，而是通過消息隊列進行。

可以理解為：某博主（發布者）發布了一個短視頻在短視頻平臺（消息隊列）上，每天上班搬磚的打工人（訂閱者）趁著吃飯的時間，刷刷短視頻，發現該博主的視頻非常優秀有內容，于是在該短視頻平臺上訂閱關注了該視頻博主。然后該博主只要更新了視頻，你就能接收到通知。

特點

松解耦：發布者訂閱者通過中介進行通信，互不知曉對方存在。降低了組件間的耦合度，使得更容易理解維護和擴展。
擴展性：由于解耦性，可以更容易擴展。新增發布者或訂閱者不影響現有組件。
靈活性：允許任何數量的發布者訂閱者存在，支持多對多通信。刪除、修改、新增不影響系統運行。
異步通信：支持異步通信，能更高效處理消息，提高響應性。

舉例子

class eventChannel {
  constructor() {
    this.msgMap = {}
  }
  publish(name, param) {
    const msg = this.msgMap[name]
    if (msg) {
      msg.subscribeList.forEach(subscribe => {
        subscribe.callback(param)
      })
    }
  }
  subscribe(name, callback) {
    const msg = this.msgMap[name]
    if (msg) {
      msg.subscribe.push({callback})
    } else {
      this.msgMap[name] = {
        name,
        subscribeList: [{callback}]
      }
    }
  }
}

觀察者模式 Observer Pattern

面試有時候會被問到觀察者模式和發布-訂閱模式之間有什么不同。簡單的說：觀察者（Observer）直接訂閱（Subscribe）主題（Subject），而當主題被激活的時候，會觸發（Fire Event）觀察者里的事件，沒有中介代替傳遞消息。

觀察者模式定義了對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，并自動更新。觀察者模式屬于行為型模式，行為型模式關注的是對象之間的通訊，觀察者模式就是觀察者和被觀察者之間的通訊。

特點

松耦合：實現了主題和觀察者之間的松耦合。
一對多關系：一個主題可以有多個觀察者。
可擴展性：可以隨時添加新的觀察者，或刪除現有觀察者。
實時性：主題發生變化時，觀察者能立刻收到通知。

舉例子

let observerIds = 0
// 被觀察者
class Subject {
  constructor() {
    this.observeres = []
  }
  addObservere(observer) {
    this.observeres.push(observer)
  }
  removeObservere(obs) {
    this.observeres = this.observeres.filter(observer => observer !== obs )
  }
  notify(data) {
    this.observeres.forEach(observer => observer(data))
  }
}

// 觀察者
class Observer {
  constructor() {
    this.id  = observerIds++
  }
  update(ob) {
    // ...
  }
}