玖玖资源站无码专区,国产精品原创巨作AV,99视频

簡單雙向綁定代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Two-way data-binding</title>
</head>
<body>
  
  <div id="app">
    <input type="text" v-model="text">
    {{ text }}
  </div>

  <script>
    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      });
    }
    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加訂閱者watcher到主題對象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作為發布者發出通知
          dep.notify();
        }
      });
    }
    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;
      
      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 將子節點劫持到文檔片段中
      }
      return flag;
    }
    function compile (node, vm) {
      var reg = /\{\{(.*)\}\}/;
      // 節點類型為元素
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析屬性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });
            node.value = vm[name]; // 將data的值賦給該node
            node.removeAttribute('v-model');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 節點類型為text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 獲取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }
    function Watcher (vm, node, name, nodeType) {
      Dep.target = this;
      this.name = name;
      this.node = node;
      this.vm = vm;
      this.nodeType = nodeType;
      this.update();
      Dep.target = null;
    }
    Watcher.prototype = {
      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 獲取data中的屬性值
      get: function () {
        this.value = this.vm[this.name]; // 觸發相應屬性的get
      }
    }
    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };
    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 編譯完成后，將dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }
    var vm = new Vue({
      el: 'app',
      data: {
        text: 'hello world'
      }
    });
  </script>

</body>
</html>

demo地址

deom 其實沒有，你們自己拷貝代碼到本地跑一下吧。

分析

我們以兩個方面來分析，一個是View到data，就是在這個代碼里當你在input里面修改值的時候，data里面text的值也會變化。
另一個是data到view，就是當你調整text的值的時候view上對應的部分也會變化。
vue的雙向綁定是基于Object.defineProperty實現的，請讀者先自行了解一下。

data到view的綁定

data到view就是數據變化會渲染到視圖上，也就是代碼中的text變化會改變div內{{text}}的顯示。
這一部分分幾個步驟

首先是最初渲染的時候將數據渲染到視圖上
其次是監聽數據的變動，變動后通知view更新

最初渲染

我們先來看看構造函數里面

    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 編譯完成后，將dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }

初始化的時候有一句

var dom = nodeToFragment(document.getElementById(id), this);
document.getElementById(id).appendChild(dom);

這一句話實現初始化的時候將數據渲染到視圖上，現在我們進nodeToFragment里面看看

    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;
      
      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 將子節點劫持到文檔片段中
      }
      return flag;
    }

這里可以注意到的是使用了一個createDocumentFragment

這里我們插入一下，這個東西創建的文檔碎片最后還是用appendChild插入了，那么為什么要用這個？其實是出于性能的考慮
我們先回顧一下一旦把節點插入到文檔流會發生什么，我們了解到當需要對頁面DOM進行操作的時候必然會導致多次重繪、回流(repaint, reflow)。這里順便附一下我的另一個博客重繪與回流(repaint and reflow) -- 前端性能(梁王的理論自習室)
我們可以知道，在更新少量節點的時候可以之間向document.body節點中添加，但是當要向document中添加大量數據是，如果逐個添加這些新節點，這個過程非常緩慢，因為每添加一個節點都會調用父節點的appendChild()方法產生一次回流和重繪，為了提高性能，可以使用一個文檔碎片，把所有的新節點附加其上，然后把文檔碎片一次性添加到document中，減少了重新渲染的次數提高了性能。

讓我們回到代碼，下面遍歷node的節點

      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 將子節點劫持到文檔片段中
      }

其實剛開始看這個我有點疑惑這個循環的寫法，為啥是child = node.firstChild，不過后來我才知道appendChild是把一個節點給"移"到flag上，也就是說移動之后node里面就沒有這個child節點了，所以這樣可以遍歷node的所有孩子并把它們都移到文檔碎片flag上。
`
不過移動之前我們先看一下compile的內容

    function compile (node, vm) {
      var reg = /\{\{(.*)\}\}/;
      // 節點類型為元素
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析屬性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });
            node.value = vm[name]; // 將data的值賦給該node
            node.removeAttribute('v-model');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 節點類型為text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 獲取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }

首先有個nodeType，這個可以去MDN看

nodeType.png

代碼里面主要用的只有1和3
如果是元素比如<p> <div>等

        var attr = node.attributes;
        // 解析屬性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });
            node.value = vm[name]; // 將data的值賦給該node
            node.removeAttribute('v-model');
          }
        };
        new Watcher(vm, node, name, 'input');

這里主要是view到data的部分我們先略過，我們主要看new Watcher這里，不過這里我們先不進Watcher里面看，現在先回到vue構造函數里面。

    function Vue (options) {
      this.data = options.data;
      var data = this.data;
      observe(data, this);
      var id = options.el;
      var dom = nodeToFragment(document.getElementById(id), this);
      // 編譯完成后，將dom返回到app中
      document.getElementById(id).appendChild(dom); 
    }

在nodeToFragment之前我們有個observe(data,this)
我們先來看看這貨

    function observe (obj, vm) {
      Object.keys(obj).forEach(function (key) {
        defineReactive(vm, key, obj[key]);
      });
    }
    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加訂閱者watcher到主題對象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作為發布者發出通知
          dep.notify();
        }
      });
    }

observe遍歷data對象里面的所有屬性，然后調用了一個defineReactive，這個函數很關鍵，現在我們來分析一下這個函數

    function defineReactive (obj, key, val) {
      var dep = new Dep();
      Object.defineProperty(obj, key, {
        get: function () {
          // 添加訂閱者watcher到主題對象Dep
          if (Dep.target) dep.addSub(Dep.target);
          return val
        },
        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作為發布者發出通知
          dep.notify();
        }
      });
    }

我們知道，vue實現雙向綁定里面一個核心就是使用了ES5的Object.defineProperty，對于這個方法請讀者自行閱讀文檔，這里我只能范范的說當我調用這個方法設置了一個obj的對應key屬性的get和set的時候，當我代碼里面出現了比如說 var b = o.h的時候，get就會被調用，而當我寫了o.h = 123的時候，set就會被調用

這里給個實驗代碼，讀者可以去控制臺試試Object.defineProperty

var _keke = {a: 'lwio'}
var o = {}

Object.defineProperty(o, 'h', {
  get: function () {
    console.log('o.h has been got');
    return _keke.a;
  },
  set: function (newVal) {
    console.log('o.h has been assigned');
    _keke.a = newVal;
  }
})

o.h            // lwio(get)
o.h = 'wanse'  // wanse(set)
o.h            // wanse(get)

現在我們回到代碼里面，
首先我們看到

var dep = new Dep()

這個是一個發布訂閱者模式的一個容器，你當它是和一個obj的一個key相互對應，其保存了監聽了data里面某個屬性的所有view對象，然后在這個data里面的屬性觸發set的時候，dep里面的監聽者會收到更新

        set: function (newVal) {
          if (newVal === val) return
          val = newVal;
          // 作為發布者發出通知
          dep.notify();
        }

    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };

在get中我們可以看到有一個單獨看比較有疑惑的語句

if (Dep.target) dep.addSub(Dep.target);

Dep的target在watcher構造時候會被賦值給當這個new出來的Watcher,然后后面會觸發data對應屬性的get把這個watcher加入Dep里面成為訂閱者。
現在我們可以回到Watcher里面了。

Watcher

好了現在我們可以回到watcher了。一個Watcher對應的是一個view對象與某個data屬性，一個data屬性可以有多個watcher

    function Watcher (vm, node, name, nodeType) {
      Dep.target = this;
      this.name = name;
      this.node = node;
      this.vm = vm;
      this.nodeType = nodeType;
      this.update();
      Dep.target = null;
    }
    Watcher.prototype = {
      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 獲取data中的屬性值
      get: function () {
        this.value = this.vm[this.name]; // 觸發相應屬性的get
      }
    }
    function Dep () {
      this.subs = []
    }
    Dep.prototype = {
      addSub: function(sub) {
        this.subs.push(sub);
      },
      notify: function() {
        this.subs.forEach(function(sub) {
          sub.update();
        });
      }
    };

代碼有點長，我們現在只關注data變化之后怎么將變化與view綁定
先解釋一下參數，Watcher里面有4個參數，第一個vm是vue實例這個我們先不管
第二個是node，也就是節點對象，第三個name是綁定data里面的屬性，比如v-model="keke"，這個name就是keke。

      Dep.target = this;
      ...
      this.update();
      Dep.target = null;

構造函數里面這一塊就是我之前說的，

Dep的target在watcher構造時候會被賦值給當這個new出來的Watcher,然后后面會觸發data對應屬性的get把這個watcher加入Dep里面成為訂閱者。

現在進update看一下

      update: function () {
        this.get();
        if (this.nodeType == 'text') {
          this.node.nodeValue = this.value;
        }
        if (this.nodeType == 'input') {
          this.node.value = this.value;
        }
      },
      // 獲取data中的屬性值
      get: function () {
        this.value = this.vm[this.name]; // 觸發相應屬性的get
      }

update即實現了觸發data某個屬性的get從而把當前Watcher加入到dep中，又實現了把data里面某個屬性的值賦值給view中的節點。

data到view總結

所以data到view的綁定流程就變成了，data某個屬性變化(觸發set) -> set中通知了監聽這個屬性的所有Watcher(dep.notify()) -> Dep調用了所有Watcher的update，把data的值賦給了view中的節點
這就是基于vue的data到view部分的綁定。

view到data

示例代碼中，通過v-model綁定的input，在輸入內容之后會使得data里面的text的值也進行了對應的修改，現在我們來看一下這一部分是怎么做的。
這一塊的核心只有compile這一個函數。
compile的調用是在初始化綁定完之后調用nodeToFragment時遍歷所有Node發生的。

    function nodeToFragment (node, vm) {
      var flag = document.createDocumentFragment();
      var child;

      while (child = node.firstChild) {
        compile(child, vm);
        flag.appendChild(child); // 將子節點劫持到文檔片段中
      }
      return flag;
    }

現在我們進compile里面看看

    function compile (node, vm) {
      var reg = /\{\{(.*)\}\}/;
      // 節點類型為元素
      if (node.nodeType === 1) {
        var attr = node.attributes;
        // 解析屬性
        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });
            node.value = vm[name]; // 將data的值賦給該node
            node.removeAttribute('v-model');
          }
        };
        new Watcher(vm, node, name, 'input');
      }
      // 節點類型為text
      if (node.nodeType === 3) {
        if (reg.test(node.nodeValue)) {
          var name = RegExp.$1; // 獲取匹配到的字符串
          name = name.trim();
          new Watcher(vm, node, name, 'text');
        }
      }
    }

其實核心的就幾行

        for (var i = 0; i < attr.length; i++) {
          if (attr[i].nodeName == 'v-model') {
            var name = attr[i].nodeValue; // 獲取v-model綁定的屬性名
            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });
            node.value = vm[name]; // 將data的值賦給該node
            node.removeAttribute('v-model');
          }
        };

這里的實例代碼比較簡單，就只有input的，vue實際上會比較復雜。
基本就是監聽這個input是否產生了變化，產生了變化就改變data的值

            node.addEventListener('input', function (e) {
              // 給相應的data屬性賦值，進而觸發該屬性的set方法
              vm[name] = e.target.value;
            });

view到data的總結

所以data到view的綁定流程就變成了，給view的節點添加事件比如input -> input事件觸發的時候吧vue對象里面的data賦值給e.target.value之類的值，以此來實現view的變化同步到data上。
這就是基于vue的data到view部分的綁定。

后序(未完成)

加入vue源碼(未完成)

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vue的雙向綁定思想(梁王的代碼解剖室)

vue的雙向綁定思想(梁王的代碼解剖室)

簡單雙向綁定代碼

demo地址

分析

data到view的綁定

最初渲染

Watcher

data到view總結

view到data

view到data的總結

后序(未完成)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vue的雙向綁定思想(梁王的代碼解剖室)

簡單雙向綁定代碼

demo地址

分析

data到view的綁定

最初渲染

Watcher

data到view總結

view到data

view到data的總結

后序(未完成)

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频