Vue 2.0雙向綁定原理的實現(xiàn)方法

更新時間：2019年10月23日 16:30:46 作者：前端的小劉老師

這篇文章主要為大家詳細介紹了Vue 2.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Object.defineProperty方法

vue.js 是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調。

具體實現(xiàn)過程的代碼如下：

1、定義構造函數(shù)

function Vue(option){
 this.$el = document.querySelector(option.el); //獲取掛載節(jié)點
 this.$data = option.data;
 this.$methods = option.methods;
 this.deps = {}; //所有訂閱者集合 目標格式（一對多的關系）：{msg: [訂閱者1, 訂閱者2, 訂閱者3], info: [訂閱者1, 訂閱者2]}
 this.observer(this.$data); //調用觀察者
 this.compile(this.$el); //調用指令解析器
}

2、定義指令解析器

Vue.prototype.compile = function (el) {
 let nodes = el.children; //獲取掛載節(jié)點的子節(jié)點
 for (var i = 0; i < nodes.length; i++) {
 var node = nodes[i];
 if (node.children.length) {
 this.compile(node) //遞歸獲取子節(jié)點
 }
 if (node.hasAttribute('l-model')) { //當子節(jié)點存在l-model指令
 let attrVal = node.getAttribute('l-model'); //獲取屬性值
 node.addEventListener('input', (() => {
 this.deps[attrVal].push(new Watcher(node, "value", this, attrVal)); //添加一個訂閱者
 let thisNode = node;
 return () => {
  this.$data[attrVal] = thisNode.value //更新數(shù)據(jù)層的數(shù)據(jù)
 }
 })())
 }
 if (node.hasAttribute('l-html')) {
 let attrVal = node.getAttribute('l-html'); //獲取屬性值
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個訂閱者
 }
 if (node.innerHTML.match(/{{([^\{|\}]+)}}/)) {
 let attrVal = node.innerHTML.replace(/[{{|}}]/g, ''); //獲取插值表達式內容
 this.deps[attrVal].push(new Watcher(node, "innerHTML", this, attrVal)); //添加一個訂閱者
 }
 if (node.hasAttribute('l-on:click')) {
 let attrVal = node.getAttribute('l-on:click'); //獲取事件觸發(fā)的方法名
 node.addEventListener('click', this.$methods[attrVal].bind(this.$data)); //將this指向this.$data
 }
 }
}

3、定義觀察者

Vue.prototype.observer = function(data){
 for(var key in data){
 (function(that){
 let val = data[key]; //每一個數(shù)據(jù)的屬性值
 that.deps[key] = []; //初始化所有訂閱者對象{msg: [訂閱者], info: []}
 var watchers = that.deps[key];
 Object.defineProperty(data, key, { //數(shù)據(jù)劫持
 get: function(){
  return val;
 },
 set: function(newVal){ //設置值(說明有數(shù)據(jù)更新)
  if(val !== newVal){
  val = newVal;
  }
  // 通知訂閱者
  watchers.forEach(watcher=>{
  watcher.update()
  })
 }
 })
 })(this)
 }
}

4、定義訂閱者

function Watcher(el, attr, vm, attrVal) {
 this.el = el;
 this.attr = attr;
 this.vm = vm;
 this.val = attrVal;
 this.update(); //更新視圖
}

5、更新視圖

Watcher.prototype.update = function () {
 this.el[this.attr] = this.vm.$data[this.val]
}

以上代碼定義在一個Vue.js文件中，在需要使用雙向綁定的地方引入即可。

嘗試使用一下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue.js"></script>
</head>
<body>
 <!--
 實現(xiàn)mvvm的雙向綁定，是采用數(shù)據(jù)劫持結合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應的監(jiān)聽回調。就必須要實現(xiàn)以下幾點：
 1、實現(xiàn)一個數(shù)據(jù)監(jiān)聽器Observer，能夠對數(shù)據(jù)對象的所有屬性進行監(jiān)聽，如有變動可拿到最新值并通知訂閱者
 2、實現(xiàn)一個指令解析器Compile，對每個元素節(jié)點的指令進行掃描和解析，根據(jù)指令模板替換數(shù)據(jù)，以及綁定相應的更新函數(shù)
 3、實現(xiàn)一個Watcher，作為連接Observer和Compile的橋梁，能夠訂閱并收到每個屬性變動的通知，執(zhí)行指令綁定的相應回調函數(shù)，從而更新視圖
 4、mvvm入口函數(shù)，整合以上三者
 -->
 <div id="app">
 <input type="text" l-model="msg" >
 <p l-html="msg"></p>
 <input type="text" l-model="info" >
 <p l-html="info"></p>
 <button l-on:click="clickMe">點我</button>
 <p>{{msg}}</p>
 </div>

 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 msg: "恭喜發(fā)財",
 info: "好好學習, 天天向上"
 },
 methods: {
 clickMe(){
  this.msg = "我愛敲代碼";
 }
 }
 })
 </script>
</body>
</html>

更多教程點擊《Vue.js前端組件學習教程》，歡迎大家學習閱讀。

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: