最易理解的VUE雙向繫結原理不足70行程式碼搞定，逐行註釋！
摘要：
VUE雙向繫結原理是前端小夥伴很難繞過的一道面試題！本篇文章對其原理進行了最大程度的精簡，希望對面試VUE開發的前端小夥伴有所幫助！我在這裡將指令 v-改為z-，主要完成z-model、z-click、z-text以及z-html四個提令。
為了能夠快速讀懂程式碼，首先要先弄明白以下三個概...
VUE雙向繫結原理是前端小夥伴很難繞過的一道面試題！本篇文章對其原理進行了最大程度的精簡，希望對面試VUE開發的前端小夥伴有所幫助！我在這裡將指令 v-改為z-，主要完成z-model、z-click、z-text以及z-html四個提令。
為了能夠快速讀懂程式碼，首先要先弄明白以下三個概念：
1、觀察者（observer）：也就是資料監聽器，負責資料物件的所有屬性進行監聽劫持，並將訊息傳送給訂閱者進行資料更新
2、訂閱者（watcher）：負責接收資料的變化，更新檢視（view），資料與訂閱者是一對多的關係。
3、解析器（compile)：負責對你的每個節點元素指令進行掃描和解析，負責相關指令的資料初始化及創造訂閱者
實現效果如下：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/zhang.js"></script>
</head>
<body>
<div id="myApp">
<input type="button" value="加個！" z-on:click="fn">
<input type="text" style="width:400px" z-model="site">
<div z-text="site"></div>
<div z-html="site"></div>
</div>
</body>
<script>
var vm = new Zhang({
el: "#myApp",
data: {
site: "<a href='http://www.zhangpeiyue.com'>zhangpeiyue</a>"
},
methods: {
fn() {
this.site += "!";
}
}
})
</script>
</html>
zhang.js完整程式碼如下，不足70行：
function Zhang(options){// 建立建構函式Zhang,並接收物件結構體options
this.$el=document.querySelector(options.el);// 指定掛載元素
this.$data=options.data;// 存放你的資料內容
this.$methods=options.methods;// 存放設你的方法
this.binding={};// 所有資料相關的訂閱者物件都存放於此。最終結構為{資料屬性:[訂閱者物件，訂閱者物件……]}
this.observer();// 呼叫觀察者，對資料進行劫持
this.compile(this.$el);// 對元素指令進行解析，訂閱者也是在此處建立的
}
Zhang.prototype.observer=function(){// 觀察者
var value="";// 定義用於存放資料屬性值的變數value
for(var key in this.$data){ // 遍歷資料物件
value=this.$data[key];// 物件屬性值
this.binding[key]=[];// 資料訂閱者初始化,是一個數組，
var binding=this.binding[key];// 用於存放本資料相關的所有訂閱者，初始為[]
Object.defineProperty(this.$data,key,{// 開始設定劫持
get(){
return value;// 讀取值為value
},
set(v){// v為設定的值
if(v!==value){// 當設定的值與當前值不相等時
value=v;// 將讀取值更新為v
binding.forEach(watcher=>{
watcher.update();// 通知與本資料相關的訂閱者們進行檢視更新
})
}
}
})
}
}
Zhang.prototype.compile=function(el){// 解析器
var nodes=el.children;// 獲得所有子節點
for(var i=0;i<nodes.length;i++){// 對子節點進行遍歷
var node=nodes[i];// 具體節點
if(node.children.length>0)// 判斷是否具有子節點
this.compile(node);// 如果有子點進行遞迴操作
if(node.hasAttribute("z-on:click")){// 該節點是否擁有z-on指令
var attrVal=node.getAttribute("z-on:click");// 得到指令對應的方法名
// 為元素繫結click事件，事件方法為$methods下的方法，並將其this指向this.$data
node.addEventListener("click",this.$methods[attrVal].bind(this.$data))
}
if(node.hasAttribute("z-model")){// 該節點是否擁有z-model指令
var attrVal=node.getAttribute("z-model");// 獲得指令對應的資料屬性
node.addEventListener("input",((i)=>{// 為指令新增input事件
this.binding[attrVal].push(new Watcher(node,"value",this,attrVal));// 為該資料新增訂閱者
return ()=>{
this.$data[attrVal]=nodes[i].value;// 更新$data的屬性值，會在觀察者中進行劫持
}
})(i))
}
if(node.hasAttribute("z-html")){// 該節點是否擁有z-html指令
var attrVal=node.getAttribute("z-html");// 獲得指令對應的資料屬性
this.binding[attrVal].push(new Watcher(node,"innerHTML",this,attrVal));
}
if(node.hasAttribute("z-text")){// 該節點是否擁有z-text指令
var attrVal=node.getAttribute("z-text");// 獲得指令對應的資料屬性
this.binding[attrVal].push(new Watcher(node,"innerText",this,attrVal));
}
}
}
function Watcher(el,attr,vm,val){// 觀察者
this.el=el;// 指令所在的元素
this.attr=attr;// 繫結的屬性名
this.vm=vm;// 指令所在例項
this.val=val;// 指令的值
this.update(); // 更新檢視view
}
Watcher.prototype.update=function(){
this.el[this.attr]=this.vm.$data[this.val];
}