02 vue發布訂閱模式(vue的數據雙向綁定是怎么實現的)

回顧一下，每當 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、部分優質企業在招聘時會對外招聘初級前端人才，因為工作上有些簡單或者不可替代的事物需要初級前端來處理，為中高級前端騰出時間和精力來做更重要的事情，才不會給企業造成資源的浪費。

2、報班學習。相較于自學來說，可能存在效率低下，容易走向誤區等問題，如果有一定的經濟條件可選擇報班突擊，提升自己的前端開發水平。

3、少談薪資先入行，選擇前端實習工作。先入行可從實習工作做起，在企業職位上能夠觸碰到行業或者企業給予的相關前端開發需求，增添自己的實戰經驗。有時候學習也并不是要在課本上，同時還可以向周圍的前端同事請教，也是快速提高自己能力的途徑之一。

二、重慶前端的薪酬如何？有哪些要求？

1、從經驗的角度看：

經驗在3年以下的前端人才，企業給出的薪酬主要集中在5—10k左右；

2、從招聘量的角度看：

相較于初級前端，大部分的企業愿意給8—15k的薪酬給3—5年經驗的中高級前端乃至前端架構師。因此，雖然工作機會較多，但留給初級前端的機會偏少。

3、從學歷方面看：

大部分的企業比較青睞大專及本科以上學歷的前端人才，畢竟前端職位需要一定的技術和知識，因此學歷是該職位的敲門磚。

三、初級開發怎么才能成長為一名高級前端？

對于初級前端來說，除了熬年限、熬經驗，實力才是最為重要的。

高水平的開發也是從初級水平成長起來的，你也是可以成長為一名高級前端開發的。前端的知識體系龐雜，框架、庫、插件數不勝數，API迭代飛速，怎么才能在如此混亂的局面中抓住正確的道路？下面介紹3點關鍵點：

01 夯實基礎

無論是做什么樣的專業技術工作，專業基礎都是十分重要的。基礎不牢固，上層建筑建的再華麗，都是岌岌可危的。

前端的基礎是什么？是HTML、CSS，JavaScript。特別是JavaScript，我們對前端基礎的掌握程度，極大程度上體現在對JavaScript的掌握程度上。所有的瀏覽器引擎運行的腳本語言都是JavaScript，我們使用的框架也是用JavaScript開發的。即使最近非常流行的typescript，其實底層也是JavaScript，是需要編譯為JavaScript后才能在瀏覽器運行的。

即使是高級前端工程師的面試中，對于JavaScript知識的考核也是必不可少的。不僅體現在JavaScript語法，API，也很大一部分包含著最新的ES6的知識。

02 洞悉原理

我們需要知道的原理不僅體現在框架的原理上，也體現在JavaScript語言和瀏覽器引擎的原理上。高級前端工程師對于框架和語言的理解絕不會停留于了解API的層面上，需要深入到了解內部原理和運行機制的層面上。

JavaScript引擎運行各種數據類型的方法的操作細節，各個JavaScript runtime在運行JavaScript的差異細節，各個框架的設計原理，使用的設計模式，核心算法，比如拼接字符串時+方法和join方法，在不同瀏覽器因為引擎操作不同而有著截然不同的性能差異；又比如Vue響應式的原理，Virtual DOM生成真實DOM和Diff的算法，運用到的發布訂閱設計模式，自定義指令，插件掛載等等，即便不懂這些，寫起業務邏輯來完全不耽誤，但是不懂這些在前端市場上完全沒有競爭力。

能完全弄懂這些原理的人的確相對很少，但是會寫JavaScript、會用Vue之類框架的人卻很多，此時如果企業看到你是了解原理的高級開發者，你的競爭力必然是陡然上升。另一方面高級前端作為初級前端的引領者，要能夠幫助初級前端工程師解決棘手的問題。如果不懂得原理，如何能夠快速的定位和解決問題，如何履行高級前端的職責？如何能夠對于不斷變化的框架API迅速地理解和深入運用？

03 主動學習

一名優秀的程序員絕對不是一個被別人牽著鼻子或者被人用鞭子趕著才會去學習的人，他一定是一個主動學習的人。

作為前端要主動學習，方向必須是能夠具有針對性的提升自身競爭力的內容，而且是輕易不會過時的穩定的知識。比如就像語言內部機制和框架原理，設計模式這種知識。學了這種知識，其實就有能力自己做一些簡單的框架，工具和庫了，心中有底氣，就可以擺脫被不斷更新的應用型，API型知識牽著鼻子走的局面。

前端依然是一個很有前途的職業，如果目前還只是一名初級前端的話，一定還要努力盡快成為一名高級前端開發者。在夯實基礎的前提下，向縱深出挖掘，在做好工作的同時，利用平時點滴零碎時間，追根朔源式的學習，不斷積累前端知識。同時也建議多看些前端最新新聞，前端前沿技術之類的文章，多嘗試最新的技術功能更新，緊跟技術發展，才能不被飛速發展的前端圈落下。

Vue 面試中常問知識點整理

生命周期：Vue實例從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期，各個階段有相對應的事件鉤子。

beforeCreate（創建前），在數據觀測和初始化事件還未開始

created（創建后），完成數據觀測，屬性和方法的運算，初始化事件， $el 屬性還沒有顯示出來

beforeMount（載入前），在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成買粉絲。注意此時還沒有掛載買粉絲到頁面上。

mounted（載入后），在 el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的買粉絲內容替換 el 屬性指向的DOM對象。完成模板中的買粉絲渲染到買粉絲頁面中。此過程中進行ajax交互。

beforeUpdate（更新前），在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。

updated（更新后），在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。

beforeDestroy（銷毀前），在實例銷毀之前調用。實例仍然完全可用。

destroyed（銷毀后），在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。

注意：

created 階段的ajax請求與 mounted 請求的區別：前者頁面視圖未出現，如果請求信息過多，頁面會長時間處于白屏狀態。

mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 。

初始化組件時，僅執行了 beforeCreate/Created/beforeMount/mounted

很赞哦!（9123）