三大框架的区别和思想

Vue的数据劫持

Vue一定意义上算是React和Angular的集大成者。它吸取了MVVM的数据管理思想，同时应用了React的virtual Dom算法。它使用了双向数据绑定来满足开发的便捷，但是它不同组件之间又使用单向数据流，来保证数据的可控性。它使用了很多Angular的指令语法，但是他革新了Angular的脏数据检查机制，使用数据劫持的方法来触法数据检查机制。它借鉴了React的组件化思想，大大增加了前端工程的结构规范化。 Vue 内部使用了 Object.defineProperty() 来实现双向绑定，通过这个函数可以监听到 set 和 get 的事件。

使用了Object.defineProperty() 的不足：

只能对属性进行数据劫持，所以需要深度遍历，影响性能
不能监听数组的数据变化，虽然其实实际上也可以监听数组一些操作的变化，其实本质上是用hack的手段实现的，增、删、换位，都是可以监听的，但是别的就不能了。

反观 Proxy 就没以上的问题，原生支持监听数组变化，并且可以直接对整个对象进行拦截，所以 Vue 也将在下个大版本中使用 Proxy 替换 Object.defineProperty。

与AngularJS的区别

使用的MVVM的思想，当触发UI事件，ajax请求或者 timeout 延迟，会触发脏检查。这时会调用 $digest 循环遍历所有的listener里的数据，判断当前值是否和先前的值有区别，如果检测到变化的话，会调用$watch 函数，最后把所有的变化全部更新，调用apply()方法把新的数据渲染到页面上。

优点：一次检测会收集所有的数据变化，然后统一更新 UI，大大减少了操作 DOM 的次数。缺点：只要有ui操作，ajax，settimeout就会进行检查，且当watcher之间相互影响的时候，更会触发多次$digest循环，这样watcher一多，就会很影响性能。

相同点：

都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。

不同点：

AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。

与React的区别

React使用的是MVC框架。所有MVC框架都是单向数据流的。

供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

相同点：

React采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。

不同点：

React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM