目录：

Vue中双向数据绑定是如何实现的

详述虚拟DOM中的diff算法

vue提供了几种脚手架模板

常见的几种MVVM的实现方式

1、Vue中双向数据绑定是如何实现的

首先我们为每个vue属性用Object.defineProperty()实现数据劫持，为每个属性分配一个订阅者集合的管理数组dep；然后在编译的时候在该属性的数组dep中添加订阅者，v-model会添加一个订阅者，{{}}也会，v-bind也会，只要用到该属性的指令理论上都会，接着为input会添加监听事件，修改值就会为该属性赋值，触发该属性的set方法，在set方法内通知订阅者数组dep，订阅者数组循环调用各订阅者的update方法更新视图。

附代码： https://www.cnblogs.com/zhenfei-jiang/p/7542900.html

2、详述虚拟DOM中的diff算法

虚拟DOM是在DOM的基础上在内存建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中

Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom）

vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可以访问到对应的Node。

逐个遍历newVdom的节点，找到它在oldVdom中的位置，如果找到了就移动对应的DOM元素，如果没找到说明是新增节点，则新建一个节点插入。遍历完成之后如果oldVdom中还有没处理过的节点，则说明这些节点在newVdom中被删除了，删除它们即可。

（1）、第一部分是一个循环，循环内部是一个分支逻辑，每次循环只会进入其中的一个分支，每次循环会处理一个节点，处理之后将节点标记为已处理（oldVdom和newVdom都要进行标记，如果节点只出现在其中某一个vdom中，则另一个vdom中不需要进行标记），标记的方法有2种，当节点正好在vdom的指针处，移动指针将它排除到未处理列表之外即可，否则就要采用其他方法，Vue的做法是将节点设置为undefined。

（2）、循环结束之后，可能newVdom或者oldVdom中还有未处理的节点，如果是newVdom中有未处理节点，则这些节点是新增节点，做新增处理。如果是oldVdom中有这类节点，则这些是需要删除的节点，相应在DOM树中删除之整个过程是逐步找到更新前后vdom的差异，然后将差异反应到DOM树上（也就是patch），特别要提一下Vue的patch是即时的，并不是打包所有修改最后一起操作DOM（React则是将更新放入队列后集中处理），朋友们会问这样做性能很差吧？实际上现代浏览器对这样的DOM操作做了优化，并无差别。

附代码：https://blog.csdn.net/m6i37jk/article/details/78140159

3、Vue提供了几种脚手架模板

附代码：https://www.jianshu.com/p/d8147230945c

---

4、常见的几种MVVM的实现方式

1、数据劫持(vue)：通过Object.defineProperty()去劫持数据每个属性对应的getter和setter

2、脏值检测(angular)：通过特定事件比如input，change，xhr请求等进行脏值检测。

3、发布-订阅模式(backbone)：通过发布消息，订阅消息进行数据和视图的绑定监听。

结构图

附代码： https://www.jianshu.com/p/b90baf27501a