快捷導(dǎo)航

vue 數(shù)據(jù)雙向綁定的實現(xiàn)方法

更新時間：2021年03月04日 10:24:13 作者：小飛2020

這篇文章主要介紹了vue 數(shù)據(jù)雙向綁定的實現(xiàn)方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

1. 前言

本文適合于學(xué)習(xí)Vue源碼的初級學(xué)者，閱讀后，你將對Vue的數(shù)據(jù)雙向綁定原理有一個大致的了解，認識Observer、Compile、Wathcer三大角色（如下圖所示）以及它們所發(fā)揮的功能。

本文將一步步帶你實現(xiàn)簡易版的數(shù)據(jù)雙向綁定，每一步都會詳細分析這一步要解決的問題以及代碼為何如此寫，因此，在閱讀完本文后，希望你能自己動手實現(xiàn)一個簡易版數(shù)據(jù)雙向綁定。

2. 代碼實現(xiàn)

2.1 目的分析

本文要實現(xiàn)的效果如下圖所示：

本文用到的HTML和JS主體代碼如下：

<div id="app">
  <h1 v-text="msg"></h1>
  <input type="text" v-model="msg">
  <div>
    <h1 v-text="msg2"></h1>
    <input type="text" v-model="msg2">
  </div>
</div>

let vm = new Vue({
    el: "#app",
    data: {
      msg: "hello world",
      msg2: "hello xiaofei"
    }
  })

我們將按照下面三個步驟來實現(xiàn)：

第一步：將data中的數(shù)據(jù)同步到頁面上，實現(xiàn) M ==> V 的初始化；
第二步：當(dāng)input框中輸入值時，將新值同步到data中，實現(xiàn) V ==> M 的綁定；
第三步：當(dāng)data數(shù)據(jù)發(fā)生更新的時候，觸發(fā)頁面發(fā)生變化，實現(xiàn) M ==> V 的綁定。

2.2 實現(xiàn)過程

2.2.1 入口代碼

首先，我們要創(chuàng)造一個Vue類，這個類接收一個 options 對象，同時，我們要對 options 對象中的有效信息進行保存；

然后，我們有三個主要模塊：Observer、Compile、Wathcer，其中，Observer用來數(shù)據(jù)劫持的，Compile用來解析元素，Wathcer是觀察者?？梢詫懗鋈缦麓a：（Observer、Compile、Wathcer這三個概念，不用細究，后面會詳解講解）。

class Vue {
    // 接收傳進來的對象
    constructor(options) {
      // 保存有效信息
      this.$el = document.querySelector(options.el);
      this.$data = options.data;

      // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，用來存放每個屬性觀察者
      this.$watcher = {};

      // 解析元素: 實現(xiàn)Compile
      this.compile(this.$el); // 要解析元素, 就得把元素傳進去

      // 劫持數(shù)據(jù): 實現(xiàn) Observer
      this.observe(this.$data); // 要劫持數(shù)據(jù), 就得把數(shù)據(jù)傳入
    }
    compile() {}
    observe() {}
  }

2.2.2 頁面初始化

在這一步，我們要實現(xiàn)頁面的初始化，即解析出v-text和v-model指令，并將data中的數(shù)據(jù)渲染到頁面中。

這一步的關(guān)鍵在于實現(xiàn)compile方法，那么該如何解析el元素呢？思路如下：

首先要獲取到el下面的所有子節(jié)點，然后遍歷這些子節(jié)點，如果子節(jié)點還有子節(jié)點，那我們就需要用到遞歸的思想；
遍歷子節(jié)點找到所有有指令的元素，并將對應(yīng)的數(shù)據(jù)渲染到頁面中。

代碼如下：（主要看compile那部分）

class Vue {
    // 接收傳進來的對象
    constructor(options) {
      // 獲取有用信息
      this.$el = document.querySelector(options.el);
      this.$data = options.data;

      // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}
      this.$watcher = {};

      // 2. 解析元素: 實現(xiàn)Compile
      this.compile(this.$el); // 要解析元素, 就得把元素傳進去

      // 3. 劫持數(shù)據(jù): 實現(xiàn) Observer
      this.observe(this.$data); // 要劫持數(shù)據(jù), 就得把數(shù)據(jù)傳入
    }
    compile(el) {
      // 解析元素下的每一個子節(jié)點, 所以要獲取el.children
      // 備注: children 返回元素集合, childNodes返回節(jié)點集合
      let nodes = el.children;

      // 解析每個子節(jié)點的指令
      for (var i = 0, length = nodes.length; i < length; i++) {
        let node = nodes[i];
        // 如果當(dāng)前節(jié)點還有子元素, 遞歸解析該節(jié)點
        if(node.children){
          this.compile(node);
        }
        // 解析帶有v-text指令的元素
        if (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          node.textContent = this.$data[attrVal]; // 渲染頁面
        }
        // 解析帶有v-model指令的元素
        if (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-model");
          node.value = this.$data[attrVal];
        }
      }
    }
    observe(data) {}
  }

這樣，我們就實現(xiàn)頁面的初始化了。

2.2.3 視圖影響數(shù)據(jù)

因為input帶有v-model指令，因此我們要實現(xiàn)這樣一個功能：在input框中輸入字符，data中綁定的數(shù)據(jù)發(fā)生相應(yīng)的改變。

我們可以在input這個元素上綁定一個input事件，事件的效果就是：將data中的相應(yīng)數(shù)據(jù)修改為input中的值。

這一部分的實現(xiàn)代碼比較簡單，只要看標(biāo)注那個地方就明白了，代碼如下：

class Vue {
    constructor(options) {
      this.$el = document.querySelector(options.el);
      this.$data = options.data;
      
      this.$watcher = {};  

      this.compile(this.$el);

      this.observe(this.$data);
    }
    compile(el) {
      let nodes = el.children;

      for (var i = 0, length = nodes.length; i < length; i++) {
        let node = nodes[i];
        if(node.children){
          this.compile(node);
        }
        if (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          node.textContent = this.$data[attrVal];
        }
        if (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-model");
          node.value = this.$data[attrVal];
          // 看這里??！只多了三行代碼?。?
          node.addEventListener("input", (ev)=>{
            this.$data[attrVal] = ev.target.value;
            // 可以試著在這里執(zhí)行:console.log(this.$data),
            // 就可以看到每次在輸入框輸入文字的時候,data中的msg值也發(fā)生了變化
          })
        }
      }
    }
    observe(data) {}
  }

2.2.4 數(shù)據(jù)影響視圖

至此，我們已經(jīng)實現(xiàn)了：當(dāng)我們在input框中輸入字符的時候，data中的數(shù)據(jù)會自動發(fā)生更新；

本小節(jié)的主要任務(wù)是：當(dāng)data中的數(shù)據(jù)發(fā)生更新的時候，綁定了該數(shù)據(jù)的元素會在頁面上自動更新視圖。具體思路如下：

1) 我們將要實現(xiàn)一個 Wathcer 類，它有一個update方法，用來更新頁面。觀察者的代碼如下：

class Watcher{
    constructor(node, updatedAttr, vm, expression){
      // 將傳進來的值保存起來，這些數(shù)據(jù)都是渲染頁面時要用到的數(shù)據(jù)
      this.node = node;
      this.updatedAttr = updatedAttr;
      this.vm = vm;
      this.expression = expression;
      this.update();
    }
    update(){
      this.node[this.updatedAttr] = this.vm.$data[this.expression];
    }
  }

2) 試想，我們該給哪些數(shù)據(jù)添加觀察者？何時給數(shù)據(jù)添加觀察者？

在解析元素的時候，當(dāng)解析到v-text和v-model指令的時候，說明這個元素是需要和數(shù)據(jù)雙向綁定的，因此我們在這時往容器中添加觀察者。我們需用到這樣一個數(shù)據(jù)結(jié)構(gòu)：{屬性1: [wathcer1, wathcer2...], 屬性2: [...]}，如果不是很清晰，可以看下圖：

可以看到：vue實例中有一個$wathcer對象，$wathcer的每個屬性對應(yīng)每個需要綁定的數(shù)據(jù)，值是一個數(shù)組，用來存放觀察了該數(shù)據(jù)的觀察者。（備注：Vue源碼中專門創(chuàng)造了Dep這么一個類，對應(yīng)這里所說的數(shù)組，本文屬于簡易版本，就不過多介紹了）

3) 劫持數(shù)據(jù)：利用對象的訪問器屬性getter和setter做到當(dāng)數(shù)據(jù)更新的時候，觸發(fā)一個動作，這個動作的主要目的就是讓所有觀察了該數(shù)據(jù)的觀察者執(zhí)行update方法。

總結(jié)一下，在本小節(jié)我們需要做的工作：

實現(xiàn)一個Wathcer類；
在解析指令的時候（即在compile方法中）添加觀察者；
實現(xiàn)數(shù)據(jù)劫持（實現(xiàn)observe方法）。

完整代碼如下：

  class Vue {
    // 接收傳進來的對象
    constructor(options) {
      // 獲取有用信息
      this.$el = document.querySelector(options.el);
      this.$data = options.data;

      // 容器: {屬性1: [wathcer1, wathcer2...], 屬性2: [...]}
      this.$watcher = {};

      // 解析元素: 實現(xiàn)Compile
      this.compile(this.$el); // 要解析元素, 就得把元素傳進去

      // 劫持數(shù)據(jù): 實現(xiàn) Observer
      this.observe(this.$data); // 要劫持數(shù)據(jù), 就得把數(shù)據(jù)傳入
    }
    compile(el) {
      // 解析元素下的每一個子節(jié)點, 所以要獲取el.children
      // 拓展: children 返回元素集合, childNodes返回節(jié)點集合
      let nodes = el.children;

      // 解析每個子節(jié)點的指令
      for (var i = 0, length = nodes.length; i < length; i++) {
        let node = nodes[i];
        // 如果當(dāng)前節(jié)點還有子元素, 遞歸解析該節(jié)點
        if (node.children) {
          this.compile(node);
        }
        if (node.hasAttribute("v-text")) {
          let attrVal = node.getAttribute("v-text");
          // node.textContent = this.$data[attrVal]; 
          // Watcher在實例化時調(diào)用update, 替代了這行代碼

          /**
           * 試想Wathcer要更新節(jié)點數(shù)據(jù)的時候要用到哪些數(shù)據(jù)? 
           * e.g.   p.innerHTML = vm.$data[msg]
           * 所以要傳入的參數(shù)依次是: 當(dāng)前節(jié)點node, 需要更新的節(jié)點屬性, vue實例, 綁定的數(shù)據(jù)屬性
          */
          // 往容器中添加觀察者: {msg1: [Watcher, Watcher...], msg2: [...]}
          if (!this.$watcher[attrVal]) {
            this.$watcher[attrVal] = [];
          }
          this.$watcher[attrVal].push(new Watcher(node, "innerHTML", this, attrVal))
        }
        if (node.hasAttribute("v-model")) {
          let attrVal = node.getAttribute("v-model");
          node.value = this.$data[attrVal];

          node.addEventListener("input", (ev) => {
            this.$data[attrVal] = ev.target.value;
          })

          if (!this.$watcher[attrVal]) {
            this.$watcher[attrVal] = [];
          }
          // 不同于上處用的innerHTML, 這里input用的是vaule屬性
          this.$watcher[attrVal].push(new Watcher(node, "value", this, attrVal))
        }
      }
    }
    observe(data) {
      Object.keys(data).forEach((key) => {
        let val = data[key];  // 這個val將一直保存在內(nèi)存中,每次訪問data[key],都是在訪問這個val
        Object.defineProperty(data, key, {
          get() {
            return val;  // 這里不能直接返回data[key],不然會陷入無限死循環(huán)
          },
          set(newVal) {
            if (val !== newVal) {
              val = newVal;// 同理,這里不能直接對data[key]進行設(shè)置,會陷入死循環(huán)
              this.$watcher[key].forEach((w) => {
                w.update();
              })
            }
          }
        })
      })
    }
  }

  class Watcher {
    constructor(node, updatedAttr, vm, expression) {
      // 將傳進來的值保存起來
      this.node = node;
      this.updatedAttr = updatedAttr;
      this.vm = vm;
      this.expression = expression;
      this.update();
    }
    update() {
      this.node[this.updatedAttr] = this.vm.$data[this.expression];
    }
  }

  let vm = new Vue({
    el: "#app",
    data: {
      msg: "hello world",
      msg2: "hello xiaofei"
    }
  })

至此，代碼就完成了。