2. 程式人生 > 程式設計 >Vue簡單實現原理詳解

Vue簡單實現原理詳解

阿新 • • 發佈：2020-05-08

本文例項講述了Vue實現原理。分享給大家供大家參考，具體如下：

用了Vue也有兩年時間了，一直以來都是隻知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學習一下Vue底層的基本原理。

Vue官網有一段這樣的介紹：當你把一個普通的JavaScript物件傳給Vue例項的data選項，Vue將遍歷此物件所有的屬性，並使用Object.defineProperty把這些屬性全部轉為getter/setter。Object.defineProperty是ES5中一個無法shim的特性，這也就是為什麼Vue不支援 IE8 以及更低版本瀏覽器。

通過這一段的介紹不難可以得出，Vue是通過Object.defineProperty

對例項中的data資料做了挾持並且使用Object.defineProperty的getter/setter並對其進行處理之後完成了資料的與檢視的同步。

Vue簡單實現原理詳解

這張圖應該不會很陌生，熟悉Vue的同學如果仔細閱讀過Vue文件的話應該都看到過。猜想一下Vue使用Object.defineProperty做為ViewModel，對資料進行挾持之後如果View和Model發生變化的話，就會通知其相對應引用的地方進行更新處理，完成檢視的與資料的雙向繫結。

下面舉個例子：

html:

<div id="name"></div>

javaScript:

var obj = {};
Object.defineProperty(obj,"name",{
  get() {
    return document.querySelector("#name").innerHTML;
  },set(val) {
    document.querySelector("#name").innerHTML = val;
  }
})
obj.name = "Aaron";

通過上面的程式碼使用Object.defineProperty對Obj物件中的name屬性進行了挾持，一旦該屬性發生了變化則會觸發set函式執行，做出響應的操作。

扯了這麼多，具體說一下Vue實現的原理。

  1. 需要資料監聽器Observer，能夠對資料物件的所有屬性進行監聽，如有變動可拿到最新值並通知訂閱者。
  2. 需要指令解析器Compile，對每個元素節點的指令進行掃描和解析，根據指令模板替換資料，以及繫結相應的更新函式。
  3. 一個Watcher，作為連線Observer和Compile的橋樑，能夠訂閱並收到每個屬性變動的通知，執行指令繫結的相應回撥函式，從而更新檢視。
  4. MVVM入口函式，整合以上三者，實現資料響應。

Vue簡單實現原理詳解

接下來的文章將沿著這個思路一步一步向下進行，以便完成一個簡單的Vue類，完成資料與檢視的實時更新。

<div id="app">
  <p>{{name}}</p>
  <p q-text="name"></p>
  <p>{{age}}</p>
  <p>{{doubleAge}}</p>
  <input type="text" q-model="name"/>
  <button @click="changeName">點選</button>
  <div q-html="html"></div>
</div>
<script>
new QVue({
  el:"#app",data:{
    name:"I am test",age:12,html:"<button>這是一個後插入的按鈕</button>"
  },created(){
    console.log("開始吧,QVue");
    setTimeout(() => {
      this.name = "測試資料，更改了麼";
    },2000)
  },methods:{
    changeName(){
      this.name = "點選啦，改變吧";
      this.age = 1000000;
    }
  }
})
</script>

以上程式碼則是需要完成的功能，保證所有功能全部都能實現。

首先我們要考慮的是，要建立一個Vue的類，該類接收的是一個options的物件，也就是我們在例項化Vue的時候需要傳遞的引數。

class QVue {
  constructor(options){
    // 快取options物件資料
    this.$options = options;
    // 取出data資料，做資料響應
    this.$data = options.data || {};
  }
}

通過上面的程式碼可以看出了，為什麼我們可以在Vue例項上通過this.$data拿到我們所寫的data資料。

對資料已經進行了快取之後，接下來要做的事情就是對資料進行觀察，達到資料變化之後能夠做出對虛擬Dom的操作。

class QVue {
  constructor(options){
    this.$options = options;
    // 資料響應
    this.$data = options.data || {};
    // 監聽資料變化
    this.observe(this.$data);
    // 主要用來解析各種指令，比如v-modal，v-on:click等指令
    new Compile(options.el,this);
    // 執行生命週期
    if(options.created){
      options.created.call(this);
    }
  }
  // 觀察資料變化
  observe(value){
    if(!value || typeof value !== "object"){
      return;
    }
    let keys = Object.keys(value);
    keys.forEach((key)=> {
      this.defineReactive(value,key,value[key]);
      // 代理data中的屬性到vue例項上
      this.proxyData(key);
    })
  }
  // 代理Data
  proxyData(key){
    Object.defineProperty(this,{
      get(){
        return this.$data[key];
      },set(newVal){
        this.$data[key] = newVal;
      }
    })
  }
  // 資料響應
  defineReactive(obj,val){
    // 解決資料層次巢狀
    this.observe(val);
    const dep = new Dep();
    Object.defineProperty(obj,{
      get(){
        // 向管理watcher的物件追加watcher例項
        // 方便管理
        Dep.target && dep.appDep(Dep.target);
        return val;
      },set(newVal){
        if(newVal === val){
          return;
        }
        val = newVal;
        // console.log(`${key}更新了：${newVal}`)
        dep.notify();
      }
    })
  }
}

我們對data資料中的每一項都進行了資料挾持，可是然而並沒有什麼卵用啊，我們並沒有對相對應的虛擬dom進行資料改變，當然我們肯定是不能把我們的需要更改的虛擬dom操作寫在這裡，然而在Vue中對其Dom進行了特殊的處理，慢慢的向下看。

想要做資料響應要做一個做具體更新的類何以用來管理這些觀察者的類

// 管理watcher
class Dep {
  constructor() {
    // 儲存
    this.deps = [];
  }
  // 新增watcher
  appDep(dep){
    this.deps.push(dep);
  }
  // 通知所有的watcher進行更新
  notify(){
    this.deps.forEach((dep) => {
      dep.update();
    })
  }
}
// 觀察者 做具體更新
class Watcher {
  constructor(vm,cb){
    // Vue例項
    this.vm = vm;
    // 需要更新的key
    this.key = key;
    // 更新後執行的函式
    this.cb = cb;
    // 將當前watcher例項指定到Dep靜態屬性target
    // 用來在類間進行通訊
    Dep.target = this;
    // 觸發getter,新增依賴
    this.vm[this.key];
    Dep.target = null;
  }
  update(){
    this.cb.call(this.vm,this.vm[this.key]);
  }
}

Dep.target = this上面這段程式碼一定要注意，是向Dep類中添加了一個靜態屬性。

主要用來解析各種指令，比如v-modal，v-on:click等指令。然後將模版中的變數替換成資料，渲染view，將每個指令對應的節點繫結更新函式，新增監聽資料的訂閱者，一旦資料發生變動，收到通知，更新檢視。

簡單說下雙向繫結，雙向繫結原理，在編譯的時候可以解析出v-model在做操作的時候，在使用v-model元素上添加了一個事件監聽（input），把事件監聽的回撥函式作為事件監聽的回撥函式，如果input發生變化的時候把最新的值設定到vue的例項上，因為vue已經實現了資料的響應化，響應化的set函式會觸發介面中所有依賴模組的更新，然後通知哪些model做依賴更新，所以介面中所有跟這個資料有管的東西就更新了。

class Compile {
  constructor(el,vm) {
    // 要遍歷的宿主節點
    this.$el = document.querySelector(el);
    this.$vm = vm;

    // 編譯
    if(this.$el){
      // 轉換宿主節點內容為片段Fragment元素
      this.$fragment = this.node2Fragment(this.$el);
      // 執行編譯過程
      this.compile(this.$fragment);
      // 將編譯完的HTML結果追加至宿主節點中
      this.$el.appendChild(this.$fragment);
    }
  }

  // 將宿主元素中程式碼片段取出來，遍歷，這樣做比較高效
  node2Fragment(el){
    const frag = document.createDocumentFragment();
    // 將宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
    let child;
    // 如果 el.firstChild 為undefined或null則會停止迴圈
    while(child = el.firstChild){
      frag.appendChild(child);
    }
    return frag;
  }

  compile(el){
    // 宿主節點下的所有子元素
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => {
      if(this.isElement(node)){
        // 如果是元素
        console.log("編譯元素"+node.nodeName)
        // 拿到元素上所有的執行,偽陣列
        const nodeAttrs = node.attributes;
        Array.from(nodeAttrs).forEach((attr) => {
          // 屬性名
          const attrName = attr.name; 
          // 屬性值
          const exp = attr.value;   
          // 如果是指令
          if(this.isDirective(attrName)){
            // q-text
            // 獲取指令後面的內容
            const dir = attrName.substring(2);
            // 執行更新
            this[dir] && this[dir](node,this.$vm,exp);
          }
          // 如果是事件
          if(this.isEvent(attrName)){
            // 事件處理
            let dir = attrName.substring(1);  // @
            this.eventHandler(node,exp,dir);
          }
        })
      }else if(this.isInterpolation(node)){
        // 如果是插值文字
        this.compileText(node);
        console.log("編譯文字"+node.textContent)
      }
      // 遞迴子元素，解決元素巢狀問題
      if(node.childNodes && node.childNodes.length){
        this.compile(node);
      }
    })
  }
  // 是否為節點
  isElement(node){
    return node.nodeType === 1;
  }
  // 是否為插值文字
  isInterpolation(node){
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
  }
  // 是否為指令
  isDirective(attr){
    return attr.indexOf("q-") == 0;
  }
  // 是否為事件
  isEvent(attr){
    return attr.indexOf("@") == 0;
  }

  // v-text
  text(node,vm,exp){
    this.update( node,"text");
  }
  textUpdater(node,value){
    node.textContent = value;
  }

  // 雙向繫結
  // v-model
  model(node,exp){
    // 指定input的value屬性，模型到檢視的繫結
    this.update(node,"model");
    // 試圖對模型的響應
    node.addEventListener('input',(e) => {
      vm[exp] = e.target.value;
    })
  }
  modelUpdater(node,value){
    node.value = value;
  }

  // v-html
  html(node,exp){
    this.update(node,"html")
  }
  htmlUpdater(node,value){
    node.innerHTML = value;
  }
  
  // 更新插值文字
  compileText(node){
    let key = RegExp.$1;
    this.update( node,"text");
  }
  // 事件處理器
  eventHandler(node,dir){
    let fn = vm.$options.methods && vm.$options.methods[exp];
    if(dir && fn){
      node.addEventListener(dir,fn.bind(vm));
    }
  }

  // 更新函式 - 橋接
  update(node,dir){
    const updateFn = this[`${dir}Updater`];
    // 初始化
    updateFn && updateFn(node,vm[exp]);
    // 依賴收集
    new Watcher(vm,function(value){
      updateFn && updateFn(node,value);
    })
  }
}

其實Compile整個編譯過程，就是在做一個依賴收集的工作，然Vue知道每一個指令是做什麼的。並做出對應的更新處理。

Vue整體的編譯過程，因為vue所編寫的指令html無法進行識別，通過編譯的過程可以進行依賴收集，依賴收集以後把data中的資料和檢視進行了關聯，產生了依賴關係，如果以後資料模型發生變化我們可以通過這些依賴通知這些檢視進行更新，這是執行編譯的目的，就可以做到資料模型驅動檢視變化。

參考文章：

vue中的雙向資料繫結詳解
Vue雙向繫結實現

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《javascript面向物件入門教程》、《JavaScript錯誤與除錯技巧總結》、《JavaScript資料結構與演算法技巧總結》、《JavaScript遍歷演算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程式設計有所幫助。

相關推薦

Vue簡單實現原理詳解

本文例項講述了Vue實現原理。分享給大家供大家參考，具體如下： 用了Vue也有兩年時間了，一直以來都是隻知其然，不知其所以然，為了能更好的使用Vue不被Vue所奴役，學習一下Vue底層的基本原理。

JavaScript開發簡單易懂的Svelte實現原理詳解

目錄Demo1create_fragmentSvelteComponent可以改變狀態的DemoSvelte問世很久了，一直想寫一篇好懂的原理分析文章，拖了這麼久終於寫了。

MySQL DISTINCT 的基本實現原理詳解

前言 DISTINCT 實際上和 GROUP BY 操作的實現非常相似，只不過是在 GROUP BY 之後的每組中只取出一條記錄而已。所以，DISTINCT 的實現和 GROUP BY 的實現也基本差不多，沒有太大的區別。同樣可以通過鬆散索引掃描或者

Mysql中事務ACID的實現原理詳解

引言 照例，我們先來一個場景~ 面試官:\"知道事務的四大特性麼?\" 你:\"懂，ACID嘛，原子性(Atomicity)、一致性(Consistency)、隔離性(Isolation)、永續性(Durability)！\"

MySQL學習（七）：Innodb儲存引擎索引的實現原理詳解

概述 在資料庫當中，索引就跟樹的目錄一樣用來加快資料的查詢速度，對於一個SQL查詢操作，根據索引快速過濾掉不符合要求的資料並定位到符合要求的資料，從而不需要掃描整個表來獲取所需的資料。

Python字典底層實現原理詳解

在Python中，字典是通過散列表或說雜湊表實現的。字典也被稱為關聯陣列，還稱為雜湊陣列等。也就是說，字典也是一個數組，但陣列的索引是鍵經過雜湊函式處理後得到的雜湊值。雜湊函式的目的是使鍵均勻地分佈在陣列中

javascript異常處理實現原理詳解

這篇文章主要介紹了javascript異常處理實現原理詳解,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Python numpy多維陣列實現原理詳解

NumPy(Numerical Python) 是 Python 語言的一個擴充套件程式庫，支援大量的維度陣列與矩陣運算，此外也針對陣列運算提供大量的數學函式庫。今天就針對多維陣列展開來寫部落格numpy其一部分功能如下：

Javascript模組化機制實現原理詳解

1. 概述 js發展初期暴露了其缺陷：缺乏模組，後來提出了commonJS規範來規範其模組的規範。作為JavaScript新手，發現對於其JavaScript的模組機制，不是很理解。我查閱了一些資料整理了JavaScript CommonJS的原理和機

Django高併發負載均衡實現原理詳解

1 什麼是負載均衡？ 當一臺伺服器的效能達到極限時，我們可以使用伺服器叢集來提高網站的整體效能。那麼，在伺服器叢集中，需要有一臺伺服器充當排程者的角色，使用者的所有請求都會首先由它接收，排程者再根據每臺

JavaScript ES6 Class類實現原理詳解

JavaScript ES6之前的還沒有Class類的概念，生成例項物件的傳統方法是通過建構函式。

SpringAOP切點函式實現原理詳解

一:在函式入參中使用萬用字元 @AspectJ支援3種萬用字元 * :匹配任意字元,但它只能匹配上下文中的一個元素.

MySQL事務及Spring隔離級別實現原理詳解

1、事務具有ACID特性 原子性（atomicity）：一個事務被事務不可分割的最小工作單元，要麼全部提交，要麼全部失敗回滾。

JavaScript設計模式之策略模式實現原理詳解

俗話說，條條大路通羅馬。在現實生活中，我們可以採用很多方法實現同一個目標。比如我們先定個小目標，先掙它一個億。我們可以根據具體的實際情況來完成這個目標。

基於腳手架建立Vue專案實現步驟詳解

第一步 準備工作 1.下載安裝Node.js 驗證是否安裝的方法，在命令列輸入node -v 2.安裝Vue

Java引數傳遞及值傳遞實現原理詳解

java方法引數的傳遞有兩種，值傳遞和引用傳遞。 1.按值傳遞： 引數型別是int,long等八大基本資料型別時，引數傳遞的過程是按值拷貝的過程

Django DRF認證元件流程實現原理詳解

檢視函式中加上認證功能，流程見下圖 import hashlib import time def get_random(name): md = hashlib.md5()

Spring Security UserDetails實現原理詳解

1. 前言 今天開始我們來一步步窺探它是如何工作的。我們又該如何駕馭它。本篇將通過 Spring Boot 2.x 來講解 Spring Security 中的使用者主體UserDetails。以及從中找點樂子。

Android非同步訊息處理機制實現原理詳解

訊息處理機制主要物件:Looper,Handler,Message(還有MessageQueue和Runnable) Looper不斷從MessageQueue訊息佇列中取出一個Message，然後傳給Handle，如此迴圈往復，如果佇列為空，那麼它會進入休眠。

JAVA加密演算法數字簽名實現原理詳解

所謂數字簽名就是資訊傳送者用其私鑰對從所傳報文中提取出的特徵資料（或稱數字指紋）進行 RSA 演算法操作，以保證發信人無法抵賴曾發過該資訊（即不可抵賴性），同時也確保資訊報文在經簽名後末被篡改（即完整性）。