重温vue双向绑定原理

发表于 | 分类于 | 阅读次数
| 字数统计 2,224 | 阅读时长 9

摘要：因为项目刚开始用的vue框架，所以早期也研究了一下他的代码看过相关文章的解析，说说也能说个七七八八。不过今天再去看以前的demo的时候，发现忽然一知半解了，说明当时可能也没有理解透，所以写篇文章让自己理解的更深一些。

本篇文章大多数知识点实在学习了这篇Vue.js双向绑定的实现原理之后避免遗忘，所以写这个温故知新，加强理解。

项目位置链接

一、访问器属性

如果稍微看过相关文章的人都知道vue的实现是依靠Object.defineproperty()来实现的。每个对象都有自己内置的set和get方法，当每次使用set时，去改变引用该属性的地方，从而实现数据的双向绑定。简单举例

1
2
3
4
5
6
7
8
9
10
11
const obj = {};
Object.defineProperty(obj,'hello',{
    get(value){
        console.log("啦啦啦，方法被调用了");
    },
    set(newVal,oldVal){
        console.log("set方法被调用了，新的值为" + newVal)
    }
})
obj.hello; //get方法被调用了
obj.hello = "1234"; //set方法被调用了

二、极简双向绑定的实现

基于这个原理，如果想实现显示文字根据输入input变化，实现一个简单版的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<input type="text" id="a"/>
<span id="b"></span>
<script>
    const obj = {};
    Object.defineProperty(obj,'hello',{
        get(){
            console.log("啦啦啦，方法被调用了");
        },
        set(newVal){
            document.getElementById('a').value = newVal;
            document.getElementById('b').innerHTML = newVal;
        }
    })
    document.addEventListener('keyup',function(e){
        obj.hello = e.target.value;
    })
</script>

上面这个实例实现的效果是：随着文本框输入文字的变化，span会同步显示相同的文字内容。同时在控制台用js改变obj.hello，视图也会更新。这样就实现了view->model，model->view的双向绑定。

三、拆解任务，实现vue的双向数据绑定

我们最终实现下面vue的效果

1
2
3
4
5
6
7
8
9
10
11
<div id="app">
    <input type="text" v-model="text"/>
</div>
<script>
const vm = new Vue({
    id : "app",
    data : {
        text : "hello world"
    }
})
</script>

1.输入框的文本与文本节点的data数据绑定
2.输入框的内容发生变化时，data中的数据也发生变化，实现view->model的变化
3.data中的数据发生变化时，文本节点的内容同步发生变化，实现model->view的变化

要实现1的要求，则又涉及到了dom的编译，其中有一个DocumentFragment的知识点。

四、DocumentFragment

众所周知，vue吸收了react虚拟DOM的优点，使用DocumentFragment处理节点，其性能和速度远胜于直接操作dom。vue进行编译时，就是将所有挂载在dom上的子节点进行劫持到使用DocumentFragment处理节点，等到所有操作都执行完毕，将DocumentFragment再一模一样返回到挂载的目标上。

先实现一段劫持函数，将要操作的dom全部劫持到DocumentFragment中，然后再append会原位置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="app">
    <input type="text" v-model="text"/>
</div>
<script>
const app = document.getElementById("app");
const nodetoFragment = (node) => {
    const flag = document.createDocumentFragment();
    let child;
    whild(child = node.firstChild){
        flag.appendChild(child);//不断劫持挂载元素下的所有dom节点到创建的DocumentFragment
    }
    return flag
}
const dom = nodetoFragment(app);
</script>

五、数据初始化绑定

当已经获取到所有的dom元素之后，则需要对数据进行初始化绑定，这里简单涉及到了模板的编译。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
//  编译HTML模板
	const compile = (node,vm) => {
		const regex = /\{\{(.*)\}\}/;//为临时正则表达式，为demo而生
		//如果节点类型为元素的话
		if(node.nodeType === 1){
			const attrs = node.attributes;//学到一个新属性。。。
			for(let i = 0;i < attrs.length; i++){
				let attr = attrs[i];
				if(attr.nodeName === "v-model"){
					let name = attr.nodeValue;
					node.addEventListener("input",function (e) {
					    vm.data[name] = e.target.value;
					})
					node.value = vm.data[name];
					node.removeAttribute("v-model");
				}
			}
		}
		//如果节点类型为文本的话
		if(node.nodeType === 3){
			if(regex.test(node.nodeValue)){
				let name = RegExp.$1;//获取搭配匹配的字符串，又学到了。。。
				name = name.trim();
				node.nodeValue = vm.data[name];
			}
		}
	};
	//劫持挂载元素到虚拟dom
	let nodeToFragment = (node,vm) => {
		const flag = document.createDocumentFragment();
		let child;
		while(child = node.firstChild){
			compile(child,vm);//绑定数据，插入到虚拟DOM中
			flag.appendChild(child);
		}
		return flag;
	};
	//初始化
	class Vue {
		constructor(option){
			this.data = option.data;
			let id = option.el;
			let dom = nodeToFragment(document.getElementById(id),this);
			document.getElementById(id).appendChild(dom);
		}
	}
	const vm = new Vue({
		el : "app",
		data : {
			text : "hello world"
		}
	})

通过以上代码先实现了第一个要求，文本框和文本节点已经出现了hello woeld了

六、响应式的数据绑定

接下来我们要实现数据双向绑定的第一步，即view->model的绑定。根据之前那个简单的例子看到，我们实时获取input中的值，通过Object.defineProperty将data中的text设置为vm的访问器属性，通过set方法，当我们在设置vm.data的值时，实现数据层的绑定。在这一步，set中要做的操作是更新属性的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let defineReactive = (obj,key,val) => {
    Object.defineProperty(obj,key,{
        get(val){
            return val;
        }
    	set(newVal,oldVal){
    	    if(newVal === oldVal) return;
    	    val = newVal;
    	    console.log(val);
    	}
    })
};
//监听数据
let observe = (obj,vm) => {
	Object.keys(obj).forEach((key)=>{
		defineReactive(vm.data,key,obj[key]);
	})
};

七、订阅/发布模式（subscribe&publish）

text 属性变化了，set方法触发了，可以通过view层的改变实时改变数据，可是并没有改变文本节点的数据。一个新的知识点：订阅发布模式。

订阅发布模式（又称为观察者模式）定义了一种一对多的关系，让多个观察者同时监听一个主题对象，这个主体对象的改变会通知所有观察者对象。

发布者发出通知=>主题对象收到通知并推送给订阅者=>订阅者执行操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 //	三个订阅者
	let sub1 = {updata(){console.log(1);}};
	let sub2 = {updata(){console.log(2);}};
	let sub3 = {updata(){console.log(3);}};
	//  一个主题发布器
	class Dep{
		constructor(){
			this.subs = [sub1,sub2,sub3];
		}
		notify(){
			subs.forEach((sub) => {
				sub.updata();
			})
		}
	}
	const dep = new Dep();
//	一个发布者
	const pub = {
		publish(){
		    dep.notipy();
		}
	};
	pub.publish();

上图为一个简单实例，发布者执行发布命令，所有这个主题的订阅者执行更新操作。接下去我们要做的就是，当set方法触发后，input作为发布者，改变了text属性；而文本节点作为订阅者，在收到消息后执行更新操作。

八、双向绑定的实现

每次new一个新的vue对象时，主要是做了两件事，一件是监听数据：observer(监听数据)，第二个是编译HTML，nodeToFragement(id)。

在监听数据的过程中，会为data中的每一个属性生成一个主题对象。

而在编译HTML的过程中，会为每个与数据绑定的相关节点生成一个订阅者watcher，订阅者watcher会将自己订阅到相应属性的dep中。

在前面的方法中已经实现了：修改输入框内容=>再时间回调中修改属性值=>触发属性的set方法。

接下来要做的是发出通知dep.notify=>发出订阅者的uodate方法=>更新视图。

那么如何将watcher添加到关联属性的dep中呢。

编译HTML过程中，为每一个与data关联的节点生成一个watcher，那么watcher中又发生了什么？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//  每一个属性节点的watcher
class Watcher{
	constructor(vm,node,name){
		Dep.target = this;
		this.name = name;
		this.node = node;
		this.vm = vm;
		this.update();
		Dep.target = null;
	}
	update(){
		//获得最新值，然后更新视图
		this.get();
		this.node.nodeValue = this.value;
	}
	get(){
		this.value = this.vm.data[this.name];
	}
}

在编译HTML的过程中，生成watcher

1
2
3
4
5
6
7
8
9
10
11
12
13
let complie = (node,vm){
    ......
    //如果节点类型为文本的话
    if(node.nodeType === 3){
	    if(regex.test(node.nodeValue)){
	        let name = RegExp.$1;
	        name = name.trim();
            node.nodeValue = vm.data[name];
            
            new Watcher(vm,node,name);//在此处添加订阅者
        }
    }
}

首先将自己赋给了一个全局变量Dep.target;然后执行了uodate方法，进而执行了get方法，读取了vm的访问器属性，从而触发了访问器属性的get方法，get方法将相应的watcher添加到对应访问器属性的dep中。再次，获取属性的值，然后更新视图。最后将dep.target设置为空，是因为这是个全局变量也是watcher与dep之间唯一的桥梁，任何时间都只能保证只有一个值。（其实就是说全局一个主题，每个订阅者和发布者都是通过这个主题进行沟通。当执行代码时，这个主题接受到一个发布通知，通知完所有订阅者，然后注销掉，用于下一个通知发布。啰嗦了一段就是想讲为什么要设置Dep.target = null）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//  一个主题发布器
class Dep(){
    constructor(){
        this.subs = [];
    }
    notify(){
        this.subs.forEach((sub) => {
            sub.update();
        }
    }
    addSub(sub){
        this.subs.push(sub);
    }
}
let defineReactive = (obj,key,val) => {
    let dep = new Dep();
    Object.defineProperty(obk,key,{
        get(){
            if(dep.target) dep.addSub(dep.target);
        }        
        set(newVal,oldVal){
            if(newVal === oldVal) return;
            val = newVal;
            dep.notify();
        }
    })
}

至此，hello world 双向绑定就基本实现了。文本内容会随输入框内容同步变化，在控制器中修改 vm.text 的值，会同步反映到文本内容中。