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>

<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!';
            }
        }
    });
</script>

Vue實現這種數據雙向綁定的效果，須要三大模塊：

1. Observer：可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者
2. Compile：對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數
3. Watcher：做爲鏈接Observer和Compile的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數，從而更新視圖

Observer

Observer的核心是經過Obeject.defineProperty()來監聽數據的變更，這個函數內部能夠定義setter和getter，每當數據發生變化，就會觸發setter。這時候Observer就要通知訂閱者，訂閱者就是Watcher。

Watcher

Watcher訂閱者做爲Observer和Compile之間通訊的橋樑，主要作的事情是：

1. 在自身實例化時往屬性訂閱器(dep)裏面添加本身
2. 自身必須有一個update()方法
3. 待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調

Compile

Compile主要作的事情是解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖。

總結

關於每部分具體的代碼實現，能夠參閱 剖析Vue原理&實現雙向綁定MVVM 這篇文章，這篇文章寫得很是好。我打算研究透徹以後本身實現一下簡易的Vue框架。