03 發布者訂閱者模式vue(vuejs源碼用了什么設計模式，具體點的)

般Vue對象里面的data。state里面存放的數據是響應式的，Vue組件從store中讀取數據，若是store中的數據發生改變，依賴這個數據的組件也會發生更新。它通過mapState把全局的state和getters映射到當前組件的買粉絲puted計算屬性中。

b. Getter特性：getters可以對State進行計算操作，它就是store的計算屬性。雖然在組件內可以做計算屬性，但是getters可以在多組件之間復用。如果一個狀態只在一個組件內使用，可以不用getters。

c. Mutation特性：改變store中state狀態的唯一方法就是提交mutation，每個mutation都有一個字符串類型的事件類型和一個回調函數，我們需要改變state的值就要在回調函數中改變。我們要執行這個回調函數，那我們需要執行一個相應的調用方法：store.買粉絲mit。

d. Action特性：類似于mutation，不同點在于：Action提交的是mutation，而不是直接變更狀態。Action可以包含任意異步操作，Action函數接受一個與store實例具有相同方法和屬性的買粉絲ntext對象，因此你可以調用買粉絲ntext.買粉絲mit提交一個mutation。或者通過買粉絲ntext.state和買粉絲ntext.getters來獲取state和getters。Action通過store.dispatch方法觸發：store.dispatch('increment')。

e. Mole特性：Mole其實只是解決了當state中很復雜臃腫的時候，mole可以將store分解為模塊，每個模塊中擁有自己的state、mutation、action和getter。

① 創建組件頁面eg Toast.vue

② 用Vue.extend() 擴展一個組件構造器，再通過實例化組件構造器，就可以創造出可復用的組件。

③ 將toast組件掛載到新創建的div上；

④ 將toast組件的dom添加到body里；

⑤ 修改優化達到動態控制頁面顯示文字跟顯示時間；

修飾符分為：一般修飾符、事件修飾符、按鍵、系統

① 一般修飾符：

② 事件修飾符

③ 按鍵修飾符

④ 系統修飾符（可以用如下修飾符來實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。）

Vue的核心的功能，是一個視圖模板引擎，但這不是說Vue就不能成為一個框架。在聲明式渲染（視圖模板引擎）的基礎上，我們可以通過添加組件系統、客戶端路由、大規模狀態管理來構建一個完整的框架。更重要的是，這些功能相互獨立，你可以在核心功能的基礎上任意選用其他的部件，不一定要全部整合在一起。可以看到，所說的“漸進式”，其實就是Vue的使用方式，同時也體現了Vue的設計的理念

在我看來，漸進式代表的含義是：主張最少。視圖模板引擎每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。

比如說，Angular，它兩個版本都是強主張的，如果你用它，必須接受以下東西：

必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每個視圖框架都有，難以避免）所以Angular是帶有比較強的排它性的，如果你的應用不是從頭開始，而是要不斷考慮是否跟其他東西集成，這些主張會帶來一些困擾。

Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。

漸進式的含義，我的理解是：主張最少，沒有多做職責之外的事。

【手把手教你搓Vue響應式原理】（五） Watcher 與 Dep

【手把手教你搓Vue響應式原理】（一）初識Vue響應式

【手把手教你搓Vue響應式原理】（二）深度監測對象全部屬性

【手把手教你搓Vue響應式原理】（三）observe 以及 ob

【手把手教你搓Vue響應式原理】（四） 數組的響應式處理

之前已經將數據劫持已經全部完成了。

那么，接下來，主要的要點就是在于兩點，依賴收集和觸發依賴更新。

它的意義主要在于控制哪些地方使用了這個變量，然后，按照最小的開銷來更新視圖 。

首先，要先明白，依賴是什么，比方說在我們的模板中有 { { a}} ，那么，這個地方就有對于變量 a 的依賴。

在模板編譯的時候，就會觸發 a 變量的 getter 。

然后，當我們執行 a++; 的時候，那么，我們就要觸發依賴的更新，當初模板中 { { a}} 的地方，就要更新，是吧！

所以，我們都是 在 getter 中收集依賴，在 setter 中觸發依賴更新 。

這一節的內容，主要就是用來專門講清楚這兩件事情。

依賴收集和觸發依賴更新主要由兩個類來完成， Dep 和 Watcher 。

Dep 和 Watcher 在設計模式中，就是 發布-訂閱者 的模式。

而依賴，你可以理解為所謂的訂閱者。

Dep 說白了就是發布者,它的工作就是依賴管理，要知道哪些地方用到了這個變量，可能用到這個變量的地方有很多，所以，它會有多個訂閱者。

然后，每個變量都應該有屬于自己的 Dep ，因為每個變量所在的依賴位置是不一樣的，所以他們的訂閱者也不一樣。

然后在變量更新之后，就去通知所有的訂閱者（Watcher），我的變量更新了，你們該觸發視圖更新了。

Watcher 說白了就是訂閱者，它接受 Dep 發過來的更新通知之后，就去執行視圖更新了。

它其實就是所謂的 watch 監聽器，變量改變之后，執行一個回調函數。

我們先按照圖例來創建我們的 Dep 類

根據我們的需求:

Dep 我們在前面也說了，每個屬性都應該有它自己的 Dep ，用來管理依賴。

所以，首先，如果我們在 Observer 中創建 Dep，那不就可以了。畢竟 Observer 會遍歷到每一個對象。

所以，很明顯，我們可以在 defineReactive 的 get 中收集依賴

因為有了 if(Dep.target) 的判斷，所以， 只有綁定 Watcher 的變量觸發 getter 時，才會添加依賴 。

這個 Dep.target 其實就是 Watcher 的實例

所以，很明顯，我們可以在 defineReactive 的 set 中收調用 notify() 方法告知 Watcher 實例，數據更新了。

至此， Dep 的所有職責，我們已經幫它完成了。

其實照道理應該有一個刪除依賴，我們這里就不再擴展了。

首先， Watcher 實例應該大家會相對而言更加好理解點，因為，我們有一個 watch 偵聽器，大家一定都很熟悉，這兩個其實一樣。

我們先按照圖例來創建我們的 Watcher 類

根據我們的需求:

這個 parsePath 需要單獨拎出來說一下，比方說我們現在有這么一個對象

我們要監聽到 a.b.c.d ，所以，我們需要下面的這種格式

所以，這個 get 很明顯就有點難度了。 我們需要通過循環 拿到 a.b 然后 .c 然后 .d。

我們將這個方法命名為 parsePath 。

入參接受我們的 b.c.d ，我們可以看到 第一句執行之后 segments=['b','c','d'] ，然后進行第二層，這是返回了一個方法，按照循環，那就是 obj=obj.b => obj=obj.c => obj=obj.d ，所以，就是返回一個對象的 obj.b.c.d，相當于是遍歷字符串中的屬性樹。

在執行 a.b.c.d=55; 的同時，我們的控制臺就會輸出 ok 55 10 。

【尚硅谷】Vue源碼解析之數據響應式原理

很赞哦!（59）