本次給你們整理Vue底層實現原理的知識點總結,寫的十分的全面細緻,具備必定的參考價值,對此有須要的朋友能夠參考學習下。若有不足之處,歡迎批評指正。css
前言html
最近在研究 剖析Vue原理&實現雙向綁定MVVM 這篇文章,一邊學習一邊總結一下本身的思考。 Vue是一個典型的MVVM框架,模型(Model)只是普通的JavaScript對象,修改它則視圖(View)會自動更新。這種設計讓狀態管理變得很是簡單而直觀。那麼Vue是如何把模型和視圖創建起關聯的呢?前端
實現原理概述vue
這是前言提到的文章裏的代碼,一段典型的體現了Vue特色的代碼:node
<div id="mvvm-app">
<input type="text" v-model="word">
<p>{{word}}</p>
<button v-on:click="sayHi">change model</button> //點擊這個button,word的值會發生改變
</div>//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860
<script src="./js/observer.js"></script>
<script src="./js/watcher.js"></script>
<script src="./js/compile.js"></script>
<script src="./js/mvvm.js"></script>
<script>
var vm = new MVVM({
el: '#mvvm-app',
data: {
word: 'Hello World!'
},
methods: {
sayHi: function() {
this.word = 'Hi, everybody!';
}//歡迎加入前端全棧開發交流圈一塊兒學習交流:864305860
}//面向1-3年前端人員
});//幫助突破技術瓶頸,提高思惟能力
</script>
複製代碼
ue實現這種數據雙向綁定的效果,須要三大模塊:webpack
Observer:可以對數據對象的全部屬性進行監聽,若有變更可拿到最新值並通知訂閱者 Compile:對每一個元素節點的指令進行掃描和解析,根據指令模板替換數據,以及綁定相應的更新函數 Watcher:做爲鏈接Observer和Compile的橋樑,可以訂閱並收到每一個屬性變更的通知,執行指令綁定的相應回調函數,從而更新視圖web
Observer面試
Observer的核心是經過Obeject.defineProperty()來監聽數據的變更,這個函數內部能夠定義setter和getter,每當數據發生變化,就會觸發setter。這時候Observer就要通知訂閱者,訂閱者就是Watcher。bash
Watcherapp
Watcher訂閱者做爲Observer和Compile之間通訊的橋樑,主要作的事情是:
Compile
Compile主要作的事情是解析模板指令,將模板中的變量替換成數據,而後初始化渲染頁面視圖,並將每一個指令對應的節點綁定更新函數,添加監聽數據的訂閱者,一旦數據有變更,收到通知,更新視圖。
結語
感謝您的觀看,若有不足之處,歡迎批評指正。
本次給你們推薦一個免費的學習羣,裏面歸納移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。 對web開發技術感興趣的同窗,歡迎加入Q羣:864305860,無論你是小白仍是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時天天更新視頻資料。 最後,祝你們早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峯。