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>
 

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,群內有大量PDF可供自取，更有乾貨實戰專案視訊進群免費領取。

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主要做的事情是解析模板指令，將模板中的變數替換成資料，然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視。

總結

以上就是本次整理關於Vue底層實現原理的全部知識內容，如果大家還有任何不明白的地方可以在下方的留言區討論。