Vue.js 是如何實現 MVVM 的？

時間 2019-11-11

標籤 vue.js vue 如何實現 mvvm 欄目 JavaScript 简体版

原文原文鏈接

目錄html

框架到底爲咱們作了什麼？

數據和視圖分離，解耦(開放封閉原則)
- 全部數據和視圖不分離的，都會命中開放封閉原則
- Vue 數據獨立在 data 裏面，視圖在 template 中
以數據驅動視圖，只關心數據變化，dom 操做被封裝
- 使用原生js是直接經過操做dom來修改視圖，例如 ducument.getElementById('xx').innerHTML="xxx"
- 以數據驅動視圖就是，咱們只管修改數據，視圖的部分由框架去幫咱們修改，符合開放封閉模式

如何理解 MVVM ？

MVC
- Model 數據 → View 視圖 → Controller 控制器
MVVM
- MVVM不算是一種創新
- 可是其中的 ViewModel 是一種創新
- ViewModel 是真正結合前端應用場景的實現
如何理解MVVM
- MVVM - Model View ViewModel，數據，視圖，視圖模型
- 三者與 Vue 的對應：view 對應 template，vm 對應 new Vue({…})，model 對應 data
- 三者的關係：view 能夠經過事件綁定的方式影響 model，model 能夠經過數據綁定的形式影響到view，viewModel是把 model 和 view 連起來的鏈接器

如何實現 MVVM - 以 Vue.js 爲例

MVVM 框架的三大要素前端

響應式：Vue 如何監聽到 data 的每一個屬性變化
模板引擎：Vue 的模板如何被解析，指令如何處理
渲染：Vue 的模板如何被渲染成 html，渲染過程是怎樣的

Vue 如何實現響應式

什麼是響應式
- 修改 data 屬性以後，Vue 馬上監聽到，馬上渲染頁面
- data 屬性被代理到 vm 上
Object.defineProperty
- 將對象屬性的值的設置和訪問 (get，set) 都變成函數，能夠在當中加入咱們本身的邏輯(進行監聽)
- 普通的 JavaScript 對象，作屬性修改，咱們監聽不到，因此須要用到 Object.defineProperty
- 既能get，又能set，纔是雙向數據綁定

Vue 如何解析模板

模板是什麼
- 本質：模板就是字符串
- 與html格式很像，可是模板中是有邏輯的，能夠嵌入JS變量，如v-if, v-for等
- 視圖最終仍是須要由模板生成 html 來顯示
- 模板必須先要轉換成JS代碼
  - 有邏輯(v-if, v-for)，必須用JS才能實現(圖靈完備)
  - 轉換爲html渲染頁面，必須用JS才能實現
  - 所以，模板要轉換成render函數
render函數
- render函數包含了模板中全部的信息，返回 vnode，解決了模板中的邏輯(v-if, v-for)問題
- 如何找到最終生成的render函數
  - 找到vue源碼，搜索code.render，將code打印出來，就是生成的render函數
render函數與vdom
- 模板生成 html：vm._c
- vm._c 和 snabbdom 中的 h 函數的實現很像，都是傳入標籤，屬性，子元素做爲參數
- Vue.js 的 vdom 實現借鑑了 snabbdom
- updateComponent 中實現了 vdom 的 patch
- 頁面首次渲染執行 updateComponent
- data 中每次修改屬性，都會執行 updateComponent

Vue.js 運行機制

第一步：解析模板成 render 函數
- 由於在打包的時候就已經生成了render函數，因此編譯是第一步；響應式監聽是在代碼執行的時候纔開始監聽。
- 模板中的全部信息都被render函數包含
- 模板中用到的data中的屬性，都變成了js變量
- 模板中的 v-model v-for v-on都變成了js邏輯
- render函數返回vnode
第二步：響應式開始監聽
- 經過Object.definedProperty監聽到對象屬性的get和set
- 將data的屬性代理到vm上
第三步：首次渲染，顯示頁面，且綁定依賴
- 初次渲染，執行 updateComponent，執行 vm._render()
- 執行 render 函數，會訪問到 data 中的值，訪問時會被響應式的 get 方法監聽到
- 執行 updateComponent，會走到 vdom 的 patch 方法
- patch 將 vnode 渲染成 dom，初次渲染完成
- 疑問：爲什麼要監聽 get，而不是直接監聽 set ？
  - 由於 data 中有不少屬性，有些被用到，有些可能不被用到
  - 只有被用到的纔會走 get
  - 沒有走到 get 中的屬性，set 的時候咱們也無需關心
  - 避免沒必要要的從新渲染
第四步：data 屬性變化，觸發 re-render
- 修改屬性，被響應式的 set 監聽到
- set 中執行 updateComponent
- updateComponent 從新執行 vm._render()
- 生成的 vnode 和 prevVnode，經過 patch 進行對比
- 渲染到 html 中

手寫一個 Vue.js

index.htmlvue

這是最終的測試代碼，咱們本身實現的 Vue 在 XVue.js 和 compile.js兩個文件中，加起來大概200行代碼左右，主要包括功能以下：node

數據響應式：頁面中能直接引用data中的變量 test，咱們給data.test從新賦值時，頁面能隨test值改變
雙向數據綁定：v-model
模板解析，處理指令和事件綁定：v-text v-model @click
渲染頁面：將模板轉化爲 html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <div id="app">
      {{test}}
      <div v-text="test"></div>
      <p>
        <input type="text" v-model="test" />
      </p>
      <p v-html="html"></p>
      <p>
        <button @click="onClick">按鈕</button>
      </p>
    </div>
    <script src="./compile.js"></script>
    <script src="./XVue.js"></script>
    <script>
      const o = new XVue({
        el: '#app',
        data: {
          test: '123',
          foo: { bar: 'bar' },
          html: '<button>html test</button>'
        },
        methods: {
          onClick() {
            alert('按鈕點擊了')
          }
        }
      })
      console.log(o.$data.test) //123
      o.$data.test = 'hello, Xvue!'
      console.log(o.$data.test) //hello, Xvue!
    </script>
  </body>
</html>

Mini Vue 的組成部分：app

監聽器 observe ：數據劫持，實現響應式；屬性代理
依賴管理器 Dep ：負責將視圖中全部依賴收集管理，包括依賴添加和通知更新
監聽器 Watcher ：具體更新的執行者
編譯器 Compile ：掃描模板中全部依賴（指令、插值、綁定、事件等），建立更新函數和監聽器( Watcher )

XVue.js框架

class XVue {
  constructor(options) {
    this.$data = options.data;
    this.observe(this.$data);
    // 執行編譯
    new Compile(options.el, this);
  }

  observe(value) {
    if (!value || typeof value !== 'object') {
      return;
    }
    Object.keys(value).forEach(key => {
      this.defineReactive(value, key, value[key]);
      // 爲vue的data作屬性代理
      this.proxyData(key);
    });
  }

  defineReactive(obj, key, val) {
    // 遞歸查找嵌套屬性
    this.observe(val);

    // 建立Dep
    const dep = new Dep();

    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        // 收集依賴
        Dep.target && dep.addDep(Dep.target);
        // console.log(dep.deps);
        return val;
      },
      set(newVal) {
        if (newVal === val) {
          return;
        }
        val = newVal;
        dep.notify();
      },
    });
  }

  proxyData(key) {
    Object.defineProperty(this, key, {
      get() {
        return this.$data[key];
      },
      set(newVal) {
        this.$data[key] = newVal;
      },
    });
  }
}

// 依賴管理器：負責將視圖中全部依賴收集管理，包括依賴添加和通知
class Dep {
  constructor() {
    // deps裏面存放的是Watcher的實例
    this.deps = [];
  }
  addDep(dep) {
    this.deps.push(dep);
  }
  // 通知全部watcher執行更新
  notify() {
    this.deps.forEach(dep => {
      dep.update();
    });
  }
}

// Watcher: 具體的更新執行者
class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm;
    this.key = key;
    this.cb = cb;
    // 未來 new 一個監聽器時，將當前 Watcher 實例附加到 Dep.target
    // 未來經過 Dep.target 就能拿到當時建立的 Watcher 實例
    Dep.target = this;
    // 讀取操做，主動觸發 get，當前 Watcher 實例被添加到依賴管理器中 
    this.vm[this.key];
    // 清空操做，避免沒必要要的重複添加（再次觸發 get 就不須要再添加 watcher 了）
    Dep.target = null;
  }
  update() {
    // console.log('from Watcher update: 視圖更新啦！！！');
    // 通知頁面作更新
    this.cb.call(this.vm, this.vm[this.key]);
  }
}

compile.jsdom

// 掃描模板中全部依賴（指令、插值、綁定、事件等）建立更新函數和watcher
class Compile {
  // el是宿主元素或其選擇器
  // vm當前Vue實例
  constructor(el, vm) {
    this.$el = document.querySelector(el);
    this.$vm = vm;
    if (this.$el) {
      // 將dom節點轉換爲Fragment提升執行效率
      this.$fragment = this.node2Fragment(this.$el);
      // 執行編譯，編譯完成之後全部的依賴已經替換成真正的值
      this.compile(this.$fragment);
      // 將生成的結果追加至宿主元素
      this.$el.appendChild(this.$fragment);
    }
  }
  node2Fragment(el) {
    // 建立一個新的Fragment
    const fragment = document.createDocumentFragment();
    let child;
    // 將原生節點移動至fragment
    while ((child = el.firstChild)) {
      // appendChild 是移動操做，移動一個節點，child 就會少一個，最終結束循環
      fragment.appendChild(child);
    }
    return fragment;
  }
  // 編譯指定片斷
  compile(el) {
    let childNodes = el.childNodes;
    Array.from(childNodes).forEach(node => {
      // 判斷node類型，作相應處理
      if (this.isElementNode(node)) {
        // 元素節點要識別v-xx或@xx
        this.compileElement(node);
      } else if (
        this.isTextNode(node) &&
        /\{\{(.*)\}\}/.test(node.textContent)
      ) {
        // 文本節點，只關心{{msg}}格式
        this.compileText(node, RegExp.$1); // RegExp.$1匹配{{}}之中的內容
      }
      // 遍歷可能存在的子節點
      if (node.childNodes && node.childNodes.length) {
        this.compile(node);
      }
    });
  }

  compileElement(node) {
    // console.log('編譯元素節點');
    // <div v-text="test" @click="onClick"></div>
    const attrs = node.attributes;
    Array.from(attrs).forEach(attr => {
      const attrName = attr.name; // 獲取屬性名 v-text
      const exp = attr.value; // 獲取屬性值 test
      if (this.isDirective(attrName)) {
        // 指令
        const dir = attrName.substr(2); // text
        this[dir] && this[dir](node, this.$vm, exp);
      } else if (this.isEventDirective(attrName)) {
        // 事件
        const dir = attrName.substr(1); // click
        this.eventHandler(node, this.$vm, exp, dir);
      }
    });
  }

  compileText(node, exp) {
    // console.log('編譯文本節點');
    this.text(node, this.$vm, exp);
  }

  isElementNode(node) {
    return node.nodeType == 1; //元素節點
  }

  isTextNode(node) {
    return node.nodeType == 3; //元素節點
  }

  isDirective(attr) {
    return attr.indexOf('v-') == 0;
  }

  isEventDirective(dir) {
    return dir.indexOf('@') == 0;
  }

  // 文本更新
  text(node, vm, exp) {
    this.update(node, vm, exp, 'text');
  }

  // 處理html
  html(node, vm, exp) {
    this.update(node, vm, exp, 'html');
  }

  // 雙向綁定
  model(node, vm, exp) {
    this.update(node, vm, exp, 'model');

    let val = vm.exp;
    // 雙綁還要處理視圖對模型的更新
    node.addEventListener('input', e => {
      vm[exp] = e.target.value; // 這裏至關於執行了 set
    });
  }

  // 更新
  // 可以觸發這個 update 方法的時機有兩個：1-編譯器初始化視圖時觸發；2-Watcher更新視圖時觸發
  update(node, vm, exp, dir) {
    let updaterFn = this[dir + 'Updater'];
    updaterFn && updaterFn(node, vm[exp]); // 當即執行更新；這裏的 vm[exp] 至關於執行了 get
    new Watcher(vm, exp, function (value) {
      // 每次建立 Watcher 實例，都會傳入一個回調函數，使函數和 Watcher 實例之間造成一對一的掛鉤關係
      // 未來數據發生變化時， Watcher 就能知道它更新的時候要執行哪一個函數
      updaterFn && updaterFn(node, value);
    });
  }

  textUpdater(node, value) {
    node.textContent = value;
  }

  htmlUpdater(node, value) {
    node.innerHTML = value;
  }

  modelUpdater(node, value) {
    node.value = value;
  }

  eventHandler(node, vm, exp, dir) {
    let fn = vm.$options.methods && vm.$options.methods[exp];
    if (dir && fn) {
      node.addEventListener(dir, fn.bind(vm), false);
    }
  }
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。