Vue双向数据绑定原理解析及代码实现

题记

今天，看了一篇关于Vue双向绑定的博客，自己也照着博客进行了深入学习，并自己手动撸了一遍，发现对于vue的双向绑定——数据劫持+（订阅者/发布者）模式有了自己的一些理解！

这篇文章可能会很长，但是相信我，你看完后一定会对双向绑定有很透彻的理解！

正文

不多说了，我们直接来看看Vue的双向绑定机制从最简单的到最终实现版本。

一、访问器属性

大家可能都知道，关于Vue的双向绑定，很多人都知道，核心是Object.defineProperty()方法，那接下来我们就简单介绍一下！
语法：
Object.defineProperty(obj, prop, descriptor)
其中：
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

其实，简单点来说，就是通过此方法来定义一个值。
调用，使用到了get方法，
赋值，使用到了set方法。
我们来看个例子：

当我们调用时候，就会自动打印出两行文字。
注意：get 和 set 方法内部的 this 都指向 obj，这意味着 get 和 set 函数可以操作对象内部的值。另外，访问器属性的会”覆盖”同名的普通属性，因为访问器属性会被优先访问，与其同名的普通属性则会被忽略。

二、实现一个简单的双向绑定

既然我们已经知道了，每当有改变的时候都会调用到set方法，我们可以根据此来实现一个双向绑定！

实现效果如下：

此例实现的效果是：随文本框输入文字的变化，span 中会同步显示相同的文字内容；在js或控制台显式的修改 obj.hello 的值，视图会相应更新。这样就实现了 model => view 以及 view => model 的双向绑定。
通过添加事件监听keyup来触发调用set方法，而set在修改了访问器属性的同时，也修改了dom样式，改变了span标签内的文本节点。

三、实现一个真正的双向绑定的原理

1、实现效果

我们真正要实现的双向绑定是这样的：

2、任务拆分

为了实现效果我们需要拆分一下任务：
1. 将vm实例中的data中的内容绑定到输入框以及文本节点当中
2. 当输入框改变时，vm实例中的data的内容也跟着改变，实现 【view => modle】
3. 当data中的内容发生变化的时候，输入框的内容以及文本节点的内容也发生变化，实现 【modle=> view】

3、实现任务1——内容绑定

先来了解一下DocumentFragment

说到内容绑定，我们不得不来介绍DocuemntFragment（碎片化文档）这个概念，简单的来讲，你可以把它认为是一个dom节点的容器，当你创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。
而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。
举个例子：
我使用console.log(document.getElementById('app'));

可以看到，我的app中有两个子节点，一个元素节点，一个文本节点
但是，当我通过DocumentFragment 劫持数据一下后


注意：我的碎片化文档是将子节点都劫持了过