1, 框架本质不同
vue 本质是 MVVM 框架, 由 MVC 发展而来;
React 是前端组件化框架, 由后端组件化发展而来.
2, 监听数据变化的实现原理不同
Vue 通过 getter/setter 以及一些函数的劫持, 能精确知道数据变化.
React 默认是通过比较引用的方式 (diff) 进行的, 如果不优化可能导致大量不必要的 VDOM 的重新渲染. 为什么 React 不精确监听数据变化呢? 这是因为 Vue 和 React 设计理念上的区别, Vue 使用的是可变数据, 而 React 更强调数据的不可变, 两者没有好坏之分, Vue 更加简单, 而 React 构建大型应用的时候更加鲁棒.
3, 数据流的不同
Vue1.0 中可以实现两种双向绑定: 父子组件之间, props 可以双向绑定; 组件与 DOM 之间可以通过 v-model 双向绑定. Vue2.x 中去掉了第一种, 也就是父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改), 并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了.
React 一直不支持双向绑定, 提倡的是单向数据流, 称之为 onChange/setState()模式. 不过由于我们一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架, 因此很多时候我们感受不到这一点的区别了.
4, 组件通信的区别
Vue 中有三种方式可以实现组件通信: 父组件通过 props 向子组件传递数据或者回调, 虽然可以传递回调, 但是我们一般只传数据; 子组件通过事件向父组件发送消息; 通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据, 可以跨越多个层级.
React 中也有对应的三种方式: 父组件通过 props 可以向子组件传递数据或者回调; 可以通过 context 进行跨层级的通信, 这其实和 provide/inject 起到的作用差不多. React 本身并不支持自定义事件, 而 Vue 中子组件向父组件传递消息有两种方式: 事件和回调函数, 但 Vue 更倾向于使用事件. 在 React 中我们都是使用回调函数的, 这可能是他们二者最大的区别.
5, 模板渲染方式的不同
在表层上, 模板的语法不同, React 是通过 JSX 渲染模板. 而 Vue 是通过一种拓展的 html 语法进行渲染, 但其实这只是表面现象, 毕竟 React 并不必须依赖 JSX.
在深层上, 模板的原理不同, 这才是他们的本质区别: React 是在组件 JS 代码中, 通过原生 JS 实现模板中的常见语法, 比如插值, 条件, 循环等, 都是通过 JS 语法实现的, 更加纯粹更加原生. 而 Vue 是在和组件 JS 代码分离的单独的模板中, 通过指令来实现的, 比如条件语句就需要 v-if 来实现对这一点, 这样的做法显得有些独特, 会把 HTML 弄得很乱.
举个例子, 说明 React 的好处: react 中 render 函数是支持闭包特性的, 所以我们 import 的组件在 render 中可以直接调用. 但是在 Vue 中, 由于模板中使用的数据都必须挂在 this 上进行一次中转, 所以我们 import 一个组件完了之后, 还需要在 components 中再声明下, 这样显然是很奇怪但又不得不这样的做法.
6, 渲染过程不同
Vue 可以更快地计算出 Virtual DOM 的差异, 这是由于它在渲染过程中, 会跟踪每一个组件的依赖关系, 不需要重新渲染整个组件树.
React 在应用的状态被改变时, 全部子组件都会重新渲染. 通过 shouldComponentUpdate 这个生命周期方法可以进行控制, 但 Vue 将此视为默认的优化.
如果应用中交互复杂, 需要处理大量的 UI 变化, 那么使用 Virtual DOM 是一个好主意. 如果更新元素并不频繁, 那么 Virtual DOM 并不一定适用, 性能很可能还不如直接操控 DOM.
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/15780.html