目录：
1，Vue中双向数据绑定是如何实现的
2，详述虚拟DOM中的diff算法
3，vue提供了几种脚手架模板
4.常见的几种MVVM的实现方式
一：Vue中的双向数据绑定是如何实现的
**Vue的双向数据绑定是通过数据劫持结合发布者订阅者模式来实现的
条件：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、MVVM入口函数，整合以上三者
原理
个人理解：在new Vue的时候，在Observer中通过Object.defineProperty()达到数据劫持，代理所有数据的getter和setter属性，在每次触发setter的时候，都会通过Dep来通知Watcher，Watcher作为Observer数据监听器与Compile模板解析器之间的桥梁，当Observer监听到数据发生改变的时候，通过Updater来通知Compile更新视图
而Compile通过Watcher订阅对应数据，绑定更新函数，通过Dep来添加订阅者，达到双向绑定
二：详述虚拟DOM中的diff算法
1，首先要先讲一下虚拟DOM是如何实现的
虚拟DOM是通过js语法来在内存中维护一个通过数据解构描述出来的一个模拟DOM树，当数据发生改变的时候，会先对虚拟DOM进行模拟修改，然后在通过新的虚拟DOM树与旧的虚拟DOM树来对比，而这个对比就是通过diff算法来进行的虚拟DOM最大的意义不在于性能的提升（JavaScript对象比DOM对象性能高），而在于抽象了DOM的具体实现（对DOM进行了一层抽象）
so：步骤一：用JS对象模拟DOM树
步骤二：比较两棵虚拟DOM树的差异
步骤三：把差异应用到真正的DOM树上
同时维护新旧两棵虚拟DOM树，当数据发生改变的时候，开始执行对比
首先对根元素进行对比，如果根元素发生改变就直接对根元素替换
三：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）
网友评论