**
Vue双向数据绑定底层实现原理学习与分享**
最近就Vue源码很感兴趣，怀揣着一种要’‘知其所以然’'的心态，开始学习底层的东西，今天与大家分享一下Vue双向数据绑定的代码实现方式，一来可以检验我的所学，二来可以让和我一样的新手同学更好的理解双向数据绑定的原理，
我会一步步讲解然后贴代码，尽量详细点…
1.首先我们需要创建一个MVVM类，然后在我们的html页面引入并创建它的实例
//创建 MVVM.js文件
class MVVM {
constructor(data) {
//缓存重要属性(后面需要的)
this.$vm = this;
this.$data = data.data;
this.$el = data.el;
//判断视图是否存在，内容一会填写
if(this.$el) {}
}
}
2.创建html文件(我这里叫mvvm.html)并引入MVVM实例
<!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>
</head>
<body>
<div id="app">
<div class="xxx" v-text="message"></div>
<input type="text" v-model="message">
<div class="xxx">{{message}}</div>
</div>
<script src="./textMvvm.js"></script>
<script>
var vm = new MVVM({
el:'#app',
data:{
message:'阳光明媚的一天啊！'
}
})
</script>
</body>
</html>
3.现在我们要将执行model --> view 的操作将数据在页面中展示出来，让我们来创建一个文档编译器，在文档编辑器内部进行一些model --> view 的操作吧我们来创建templateComplier.js文件，并引入到html页面
class TemplateComplier {
constructor(vm,el) {
this.vm = vm;
//我们要判断el是否为元素节点，如果不是，把它转换为节点元素，我们创建nodeType方法来进行操作
this.el = nodeType(el) ? el : document.querySelector(el);
}
//判断是否为元素节点的方法
nodeType(el) {
return el.nodeType === 1;
}
}
4.我们都知道我们后续要进行很多DOM操作，如果分别进行这些操作我们的效率会很低下，我们不如使用js 的文档片段也就是fragment先将id为app里面的所有元素取走，等到操作完在一起挂载到我们的app里面，详细的操作步骤我会在代码里每行注释，跟着逻辑走，理解起来并不难
class TemplateComplier {
constructor(vm,el) {
this.vm = vm;
//我们要判断el是否为元素节点，如果不是，把它转换为节点元素，我们创建nodeType方法来进行操作
this.el = this.nodeType(el) ? el : document.querySelector(el);
//创建文档片段,创建createFragment方法
var fragment = this.createFragment(this.el);
//对文档片段里面的节点进行操作，先将model ---> view 创建complier方法进行操作
this.complie(fragment);
//操作完成后挂载到#app上
this.el.appendChild(fragment);
}
//判断是否为元素节点的方法
nodeType(el) {
return el.nodeType === 1;
}
//创建文档片段方法
createFragment(node) {
var fragment = document.createDocumentFragment(),child;
//循环将el里面元素添加到文档片段中，清空el里面的元素
while(child = node.firstChild) {
fragment.append(child);
}
return fragment;
}
complie(parent) {
//将所有节点保存下来，一会儿我们要进行遍历,这里我们要将保存下来的转成数组 创建toArray方法
var nodes = this.toArray(parent.childNodes);
var complier = this;
//遍历每个节点
nodes.forEach(node => {
//首先我们先进行元素节点的操作
//判断 是否是元素节点
if(complier.nodeType(node)){
//如果是，我们来判断他的childNodes 是否为空，因为存在多级标签嵌套的情况，如果不为空，我们继续进行遍历，
//这里我们用一个递归来解决
if(node.childNodes.length !== 0){
complier.complie(node);
}else {
//接下来，我们要开始解析指令 创建analyElements方法
complier.analyElements(node);
}
}else {
//我们现在来判断非元素节点的情况也就是我们{{message}}的内容
//首先我们创建一个正则表达式
var textReg = /\{\{(.+)\}\}/;
//获取node中textContent
var expr = node.textContent;
if(textReg.test(expr)) {
//如果满足条件我们取括号中间的内容
expr = RegExp.$1;//这块内容懂的可以上网上学习，就不细讲了
//创建方法 将值挂载到元素节点上 complieText
complier.complieText(node,expr);
}
}
});
}
complieText(node,value) {
node.textContent = this.vm.$data[value];
}
toArray(node) {
return [].slice.call(node);
}
analyElements(node) {
//获取所有属性
var attrs = node.attributes;
//缓存个this
var complier = this;
//接下来我们要对所有属性进行遍历
complier.toArray(attrs).forEach(attr => {
var attrName = attr.name;
//因我们的指令都是v-开头的，所有我们要判断这里面是否含有指令，我们定义isDireactive 方法
if(complier.isDireactive(attrName)) {
//能够进入到这一步说明它就是指令了，现在我们来验证指令类型 v-moel 和 v-text
//将指令名缓存下来
var type = attrName.slice(2);
//缓存指令属性
var expr = attr.value;
//封装函数分别处理v-moel 和 v-text 创建complierUtils
complierUtils[type](node,complier.vm,expr);
}
})
}
isDireactive(attrName) {
return attrName.indexOf('v-') >= 0;
}
}
complierUtils = {
text(node,vm,expr){
//创建文本更新方法updater
var vm = vm,expr = expr,textFn = this.updater['updatetext'];
//设置开关
textFn && this.updater['updatetext'](node,vm.$data[expr]);
},
model(node,vm,expr){
//创建model的更新方法
var vm = vm,expr = expr,textFn = this.updater['updatemodel'];
//设置开关
textFn && this.updater['updatemodel'](node,vm.$data[expr]);
},
updater: {
updatetext(node,value) {
node.textContent = value;
},
updatemodel(node,value) {
node.value = value;
}
}
}
5.好了，到这里呢，我们的model里的数据就可以正常在页面中显示出来了，接下来呢，我们就要进行view和model的绑定，我们叫这种模式为观察者模式，听起来陌生，原理其实很简单，我们只要通过oninput事件或onchange事件对页面进行监听就可以了，我这里以oninput事件为例子,我们input中的数据变化带动我们model的数据变化,我们再刚刚定义的model方法中定义事件
model(node,vm,expr){
//创建model的更新方法
var vm = vm,expr = expr,textFn = this.updater['updatemodel'];
//设置开关
textFn && this.updater['updatemodel'](node,vm.$data[expr]);
//view -- > Model 变化添加input事件
node.addEventListener(e => {
var value = e.target;
this.vm.$data[expr] = value;
})
},
6.你能看到这里，说明你已经成功了一大半了，接下来，我们要做的就是 Model数据改变 同样带动 View中的数据改变,怎么做呢？原理其实也很简单，我们需要创建一个订阅者(watcher) 和 发布者 (observer) 当我们Model数据发生改变后我们的发布者会告诉订阅者，Model数据改变了，你那边也快改变吧，这时候就会调用watcher里面的update方法将视图更新，可能你看到着还在疑惑什么watcher和observer的关系是什么，或者他们是干什么的，我可以给大家举一个例子,比如我们早上上班，我们需要七点钟起床，为了做到准时起床我们有两种方式，我们可以睁着眼一宿不睡，一直等到早上七点，显然这种方式是不行的，那么我们是不是可以准备一个闹钟呢，当时间到了的时候我就可以提醒你，而你只需要根据我的提醒在做起床的动作，这样是不是我们不用担心现在几点了，只需要等闹钟通知我们就好了呢，其实我们的watcher就好比要上班的人，observer就好比闹钟，observer的作用是到时间告诉watcher Model里面的数据改变了，你也该更新了，这时候watcher就会调用update方法进行更新，
如果大家还不懂，结合以下代码对比看看
//创建watcher.js订阅者
class Watcher {
constructor(vm,expr,callback) {
//缓存数据，将wather添加到我们的text和model更新方法中，在我们的上个js页面
this.vm = vm;
this.expr = expr;
this.cb = callback;
//缓存值
this.value = this.get()
}
get() {
//因为我们页面加载实际是进入observe的getter方法两次，
//我们要进行区分，所以我们向全局抛出一个watcher实例
Dep.target = this;
var value = this.vm.$data[this.expr];
Dep.target = null;
return value;
}
update() {
//更新方法
var oldValue = this.value;
var newValue = this.vm.$data[this.expr];
if(oldValue !== newValue) {
this.cb(newValue);
}
}
}
//创建发布者，用于提醒调用watcher里面的update方法
class Observer {
constructor(data){
//首先判断我们的data是否是一个对象
if(!data || typeof data !== 'object')
return
//设置方法，进行数据解析
this.observe(data);
}
observe(data) {
//把data中的key拿出来，以便于一会儿取值
var keys = Object.keys(data);
keys.forEach(key => {
//遍历每个属性，为每个属性增加getter和setter方法，进行数据挟持
this.dp(data,key,data[key])
})
}
//设置getter和setter方法
dp(obj,key,value) {
var dp = new Dep();
//访问器属性，不会的同学百度下，就不详细讲了
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get() {
Dep.target && dp.add(Dep.target);
return value;
},
set(newValue) {
value = newValue;
dp.notify();
}
})
}
}
//创建发布者
class Dep {
constructor() {
//我们将watcher订阅得都装进这个数组里，等一下统一通知
this.subs = [];
}
//
add(sub) {//watcher实例
this.subs.push(sub)
}
//当值改变后循环遍历一起通知订阅者改变视图
notify() {
this.subs.forEach(sub => {
sub.update();
})
}
}
//创建 MVVM.js文件
class MVVM {
constructor(data) {
//缓存重要属性(后面需要的)
this.$vm = this;
this.$data = data.data;
this.$el = data.el;
//判断视图是否存在
if(this.$el) {
//为每个元素添加getter和setter方法
new Observer(this.$data);
//我们创建template事例,将我们所需信息传过去
this.$complier = new TemplateComplier(this.$vm,this.$el);
}
}
}
//解析文本节点
complieText(node,expr) {
node.textContent = this.vm.$data[expr];
complierUtils['text'](node,this.vm,expr);
}
//text 处理方法
text(node,vm,expr) {
var vm = vm,expr = expr,textFn = this.updater['updatetext'];
textFn && this.updater['updatetext'](node,vm.$data[expr]);
new Watcher(vm,expr,(newValue)=>{
//触发之后按照之前的更新方法在更新一遍
textFn && this.updater['updatetext'](node,newValue);
})
},
model(node,vm,expr) {
var vm = vm,expr = expr,textFn = this.updater['updatemodel'];
textFn && this.updater['updatemodel'](node,vm.$data[expr]);
new Watcher(vm,expr,(newValue)=>{
//触发之后按照之前的更新方法在更新一遍
textFn && this.updater['updatemodel'](node,newValue);
})
//观察者模式监听数据改变
node.addEventListener('input',(e)=>{
var value = e.target.value;
vm.$data[expr] = value;
})
},
文章看到这儿，我们的双向数据绑定就全部完成了，第一次看可能内容有点多，没关系，多看几遍，又不理解的地方可以在下方评论或者私信给我，大家一起进步！
最后祝大家工作顺利，早日成为大牛~！
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
