来自大神郝晨光

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

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

详述虚拟DOM中的diff算法

首先要先讲一下虚拟DOM是如何实现的

虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的

虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象）

接着，来看一下diff算法是如何进行比对的

正常的diff算法，是通过层层对比，单单对比来进行的，对于我们的前端性能来说，很明显是不可以这样实现的。

前端的虚拟DOM对比

所以，前端的diff算法是通过以下步骤来实现的

步骤一：用JS对象模拟DOM树

步骤二：比较两棵虚拟DOM树的差异

步骤三：把差异应用到真正的DOM树上

同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比

首先对根元素进行对比，如果根元素发生改变就直接对根元素替换

如果根元素没有发生改变的话，再对下一层元素进行对比，如果对比发现元素发生删除，就执行删除，发现元素被替换就执行替换，发现添加了新的元素就执行添加

对比的同时，会通过key值来判断元素是否发生改变，判断元素是仅仅位置发生改变还是需要整个替换或删除

如果不是元素发生改变的话，再对内容进行对比，如果是内容发生改变的话，就直接修改内容

其实就是进行逐层对比，再通过不同的对比来判断执行不同的操作

Vue提供了几种脚手架模板

webpack- 一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。

webpack-simple- 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。

browserify- 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。

browserify-simple- 一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。

simple- 一个最简单的单页应用模板。

pwa- 一个集成pwa环境的webapp的模板

常见的几种MVVM的实现方式

实现数据绑定的做法有大致如下几种：

发布者-订阅者模式（backbone.js）

脏值检查（angular.js）

数据劫持（vue.js）

发布者-订阅者模式

一般通过sub,pub的方式实现数据和视图的绑定监听，

更新数据方式通常做法是vm.set('property', value)。

这种方式现在毕竟太low了，我们更希望通过vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式。

脏值检查

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，

最简单的方式就是通过 setInterval() 定时轮询检测数据变动，

angular只有在指定的事件触发时进入脏值检测，大致如下：

1、DOM事件，譬如用户输入文本，点击按钮等。(ng-click)

2、XHR响应事件 ($http)

3、浏览器Location变更事件 ($location)

4、Timer事件($timeout,$interval)

5、执行$digest()或$apply()

数据劫持

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，

通过Object.defineProperty()来劫持各个属性的setter，getter，

在数据变动时发布消息给订阅者，触发相应的监听回调。