使用Vue實作底層原理（詳細教學）

我為大家整理Vue底層實現原理的知識點總結，如果大家對此有需要，可以學習參考下，希望我們整理的內容能夠幫助到你。

前言

最近在研究 剖析Vue原理&實現雙向綁定MVVM 這篇文章，一邊學習一邊總結一下自己的思考。

Vue是典型的MVVM框架，模型（Model）只是普通的JavaScript對象，修改它則視圖（View）會自動更新。這種設計讓狀態管理變得非常簡單又直覺。那麼Vue是如何把模型和視圖建立起關聯的呢？

實作原理概述

這是前言提到的文章裡的程式碼，一段典型的體現了Vue特徵的程式碼：

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<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: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue實作這種資料雙向綁定的效果，需要三大模組：

Observer：能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者

Compile：對每個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數

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

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

Bootstrap實作可折疊分組側邊導覽選單

layui表格checkbox選擇全選樣式及功能的實例

layui select動態新增option的實例

以上是使用Vue實作底層原理（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！