02 vue觀察者模式和訂閱模式(vuejs源碼用了什么設計模式，具體點的)

回顧一下，每當 new 一個 Vue，主要做了兩件事：第一個是監聽數據：observe(data)，第二個是編譯 HTML：nodeToFragement(id)。

在監聽數據的過程中，我們會為 data 中的每一個屬性生成一個主題對象 dep。

在編譯 HTML 的過程中，會為每個與數據綁定相關的節點生成一個訂閱者 watcher，watcher 會將自己添加到相應屬性的 dep 容器中。

我們已經實現：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法。

接下來我們要實現的是：發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。

這里的關鍵邏輯是：如何將 watcher 添加到關聯屬性的 dep 中。

注意： 我把直接賦值的操作改為了 添加一個 Watcher 訂閱者

那么，Watcher又該做些什么呢？

首先，將自己賦給了一個全局變量 Dep.target；

其次，執行了 update 方法，進而執行了 get 方法，get 的方法讀取了 vm 的訪問器屬性，從而觸發了訪問器屬性的 get 方法，get 方法中將該 watcher 添加到了對應訪問器屬性的 dep 中；

再次，獲取屬性的值，然后更新視圖。

最后，將 Dep.target 設為空。因為它是全局變量，也是 watcher 與 dep 關聯的唯一橋梁，任何時刻都必須保證 Dep.target 只有一個值。

最終我們就實現了這個雙向數據綁定功能，雖然很繁瑣，但我相信，你多打幾遍，一定會對你有所幫助，加油吧!!

vue的數據雙向綁定是怎么實現的

vue的數據雙向綁定是通過數據劫持和發布－訂閱者功能來實現的。

實現步驟：

1.實現一個監聽者Oberver來劫持并監聽所有的屬性，一旦有屬性發生變化就通知訂閱者。

2.實現一個訂閱者watcher來接受屬性變化的通知并執行相應的方法，從而更新視圖。

3.實現一個解析器買粉絲pile，可以掃描和解析每個節點的相關指令，并根據初始化模板數據以及初始化相對應的訂閱者。

觀察者模式確實很有用，但是在javascript實踐里面，通常我們使用一種叫做發布／訂閱模式的變體來實現觀察者模式。

從圖中也能看到，這兩種模式很相似，但是也有一些值得注意的不同。

發布／訂閱模式使用一個主題／事件頻道，這個頻道處于想要獲取通知的訂閱者和發起事件的發布者之間。這個事件系統允許代碼定義應用相關的事件，這個事件可以傳遞特殊的參數，參數中包含有訂閱者所需要的值。

觀察者模式和發布訂閱模式的不同點：

觀察者模式要求想要接受相關通知的觀察者必須到發起這個事件的被觀察者上注冊這個事件。

發布／訂閱模式使用一個主題／事件頻道（類似于中介／中間商），可以減少訂閱者和發布者之間的依賴性。

發布／訂閱模式中訂閱者可以實現一個合適的事件處理函數，用于注冊和接受由發布者廣播的相關通知。

小白準備轉行學習前端，有大神可以提一些建議嗎

學習是以興趣為前提的，你要對你所要學的內容產生興趣，這樣你才會花心思去學習。這和是不是小白沒關系的，對于小白而言，在學習過程中就需要更努力，多花時間和心思沒有什么是學不會的。

自學方法：

1、作為一個初學者，你必須明確系統的學習方案，我建議一定有一個指導的人，全靠自己學，放棄的幾率非常大，在你對于web前端還沒有任何概念的時候，需要一個人領進門，之后就都靠自己鉆研，第一步就是確定web前端都需要哪些內容，并且在多少時間內學完，建議時間6個月保底。

2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最后的結果是什么？看來看去什么都不會寫，所以在這里給大家提醒，書可以看，但是是在建立于你已經對于某個知識點有了具體操作的執行后，在用書去鞏固概念，這樣更加利于你對于知識的理解。

3、對于學習技術來講，掌握一個學習方法是非常重要的，其實對于學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成“方法不對，努力白費”。其實關于這方面還是很多的，我就簡單說個例子，有的人邊聽課邊跟著敲代碼，這樣就不對，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據每個人的不同，可能學習方法也會有所出路，找到適合你自己的學習法方法是學習的前提。

4、不建議自己一個人瞎學，在我了解學習編程的這些人來看，從零基礎開始學并且最后成功做這份工作的其實并沒有幾個，我覺得大部分原因就是因為他們都不了解web前端是干什么的，學什么的，就盲目的買書看，到處找視頻看，最后看著看著就放棄了，所以我建議初學者在沒有具體概念之前，還是找有經驗的人請教一下，聊過之后你就會知道web前端具體是干什么的，該怎么學，這是我個人的小建議，可以不采納。

自學路線：

第1階段：前端頁面重構(4周)

內容包含了：(PC端網站布局項目、HTML5+CSS3基礎項目、WebApp頁面布局項目)

第2階段：JavaScript高級程序設計(5周)

內容包含：(原生JavaScript交互功能開發項目、面向對象進階與ES5/ES6應用項目、JavaScript工具庫自主研發項目)

第3階段：PC端全棧項目開發(3周)

內容包含：(jQuery經典交互特效開發、HTTP協議、Ajax進階與PHP/JAVA開發項目、前端工程化與模塊化應用項目、PC端網站開發項目、PC端管理信息系統前端開發項目)

第4階段：移動端項目開發(6周)

內容包含：(Touch端項目、買粉絲場景項目、應用Angular+Ionic開發WebApp項目、應用Vue.js開發WebApp項目、應用React.js開發WebApp項目)

第5階段：混合(Hybrid,ReactNative)開發(1周)

內容包含：(買粉絲小程序開發、ReactNative、各類混合應用開發)

第6階段：NodeJS全棧開發(1周)

內容包括：(WebApp后端系統開發、一、NodeJS基礎與NodeJS核心模塊二、Express三、noSQL數據庫)

視頻教程：

網頁鏈接

網頁鏈接

如果你對于學習前端有任何不懂的可以隨時來問我，如果沒有比較好的教程，也可以問我要。

vue數據雙向綁定原理

vue.js 采用數據劫持結合發布者-訂閱者模式的方式，通過 Object.defineProperty() 來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。

首先我們為每個vue屬性用Object.defineProperty()實現數據劫持，在監聽數據的過程中，為每個屬性分配一個訂閱者集合的管理數組dep；然后在編譯的時候在該屬性的數組dep中添加訂閱者 watcher，v-model會添加一個訂閱者，{ { }}也會，v-bind也會，只要用到該屬性的指令理論上都會，接著為input會添加監聽事件，修改值就會為該屬性賦值，觸發該屬性的set方法，在set方法內通知訂閱者數組dep，訂閱者數組循環調用各訂閱者的update方法更新視圖。

實現步驟：修改輸入框內容 => 在事件回調函數中修改屬性值 => 觸發屬性的 set 方法=>發出通知 dep.notify() => 觸發訂閱者的 update 方法 => 更新視圖。

流程圖 ：

在實例化一個Vue對象的時候，會傳進去一個data對象，之后分成兩個進程，一個進程是對掛載目標元素模板里的v-model和{ { }}；兩個指令進行編譯。另一個進程是對傳進去的data對象里面的數據進行監聽。

上圖中，observe是利用Object.defineProperty()對傳入的data對象進行數據監聽，在數據改變的時候觸發該屬性的set方法，更新該屬性的值，并發布消息，我（該屬性）的值變了。

買粉絲pile是編譯器，找到vue的指令v-model所在的元素，將data中該屬性的值賦給元素的value，并給這個元素添加二級監聽器，在元素的值改變的時候，將新值賦給data里面同名屬性，這個時候就完成了單向數據綁定，視圖 >> 模型。

那么最終的由模型到視圖的更新，依賴于dep和watcher，dep會收集訂閱者，就是綁定了data里面屬性的元素，在數據更新的時候，會觸發該屬性的set方法，在set里觸發該屬性的消息發布通知函數。而Watcher根據收到的數據變化通知，更新相應的數據。

dep這個東東給大家解釋一下，就是data里的每個屬性都有一個dep對象，dep對象里可以有很多訂閱者（watcher），但是只有一個添加訂閱者的方法和一個發布變化通知的方法，就是模板上可以有多處元素綁定data里的同一個屬性值，所以dep是依賴于data里面的屬性的。

而Watcher是每個{ { }}有一個，初次編譯的時候，會在new的時候自動更新一下模板的數據，等到下次數據改變的時候，由dep通知數據更新，直接調用watcher的update方法，更新模板的綁定數據。

observer 模塊共分為這幾個部分：

示意圖如下：

Observer的構造函數

value是需要被觀察的數據對象，在構造函數中，會給value增加 ob 屬性，作為數據已經被Observer觀察的標志。如果value是數組，就使用observeArray遍歷value，對value中每一個元素調用observe分別進行觀察。如果value是對象，則使用walk遍歷value上每個key，對每個key調用defineReactive來獲得該key的set/get控制權。

Dep是Observer與Watcher之間的紐帶，也可以認為Dep是服務于Observer的訂閱系統。Watcher訂閱某個Observer的Dep，當Ob

很赞哦!（16）