最易理解的VUE双向绑定原理不足70行代码搞定，逐行注释！
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];
}本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-01-25，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录