VUE双向绑定以及虚拟DOM相对JQuery
双向绑定
MVVM
首先什么是MVVM MVVM （ Model-View-ViewModel ） 是一种设计思想。 在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互。 Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。
VUE双向绑定大致原理
vue.js是采用数据劫持结合发布者-订阅者模式的方式通过Object.defineProperty()或者Proxy来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调 具体步骤：
- 需要Observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter,这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到数据变化
- Compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染的页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有所变动，收到通知，更新视图
- Watcher 订阅者是Observer和Compile之间的通信桥梁，主要做的事情是： 在自身实例化时，往订阅器dep里添加自己 自身必须有一个update方法 待属性编订dep.notice 通知时
- MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化——视图更新——数据变更的双向绑定效果
差距对比
如果通过下标的方式修改数组数据或者给对象新增属性并不会触发组件的重新渲染
因为Object.definedProperty拦截不了这些操作
更准确一点：对数组而言，大部分操作都拦截不到，但是vue内部通过重写函数的方式解决了这个问题
Proxy优势
- 可以直接监听对象而不是属性
- 可以直接监听数组的变化
- 13种拦截方法，比Object.defineProperty多
- 返回值为对象，可以只操作新的对象达到目的。Object.defineProperty只能遍历对象属性直接修改
虚拟DOM对比JQuery
首先 原理：
-
DOM 引擎、JS 引擎 相互独立，但又工作在同一线程（主线程） JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎，DOM 重绘后再转换可能有的返回值，最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用，且浏览器厂商不做“批量处理”优化，引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用，重新计算布局、重新绘制图像会引起更大的性能消耗。
其次 区别和优化：
-
虚拟 DOM 不会立马进行排版与重绘操作 虚拟 DOM 进行频繁修改，然后一次性比较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进行排版与重绘，减少过多DOM节点排版与重绘损耗 虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部
