深入解析Vue底層實現原理
本次給大家整理Vue底層實現原理的知識點總結,寫的十分的全面細緻,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
前言
最近在研究 剖析Vue原理&實現雙向繫結MVVM 這篇文章,一邊學習一邊總結一下自己的思考。
Vue是一個典型的MVVM框架,模型(Model)只是普通的JavaScript物件,修改它則檢視(View)會自動更新。這種設計讓狀態管理變得非常簡單而直觀。那麼Vue是如何把模型和檢視建立起關聯的呢?
實現原理概述
這是前言提到的文章裡的程式碼,一段典型的體現了Vue特點的程式碼:
<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實現這種資料雙向繫結的效果,需要三大模組:
Observer:能夠對資料物件的所有屬性進行監聽,如有變動可拿到最新值並通知訂閱者
Compile:對每個元素節點的指令進行掃描和解析,根據指令模板替換資料,以及繫結相應的更新函式
Watcher:作為連線Observer和Compile的橋樑,能夠訂閱並收到每個屬性變動的通知,執行指令繫結的相應回撥函式,從而更新檢視
Observer
Observer的核心是通過Obeject.defineProperty()來監聽資料的變動,這個函式內部可以定義setter和getter,每當資料發生變化,就會觸發setter。這時候Observer就要通知訂閱者,訂閱者就是Watcher。
Watcher
Watcher訂閱者作為Observer和Compile之間通訊的橋樑,主要做的事情是:
- 在自身例項化時往屬性訂閱器(dep)裡面新增自己
- 自身必須有一個update()方法
- 待屬性變動dep.notice()通知時,能呼叫自身的update()方法,並觸發Compile中繫結的回撥
Compile
Compile主要做的事情是解析模板指令,將模板中的變數替換成資料,然後初始化渲染頁面檢視,並將每個指令對應的節點繫結更新函式,新增監聽資料的訂閱者,一旦資料有變動,收到通知,更新檢視。
結語
感謝您的觀看,如有不足之處,歡迎批評指正。
本次給大家推薦一個免費的學習群,裡面概括移動應用網站開發,css,html,webpack,vue node angular以及面試資源等。
對web開發技術感興趣的同學,歡迎加入Q群:864305860,不管你是小白還是大牛我都歡迎,還有大牛整理的一套高效率學習路線和教程與您免費分享,同時每天更新視訊資料。
最後,祝大家早日學有所成,拿到滿意offer,快速升職加薪,走上人生巔峰。