Vue与React的异同点

相同点:

1.都支持服务器端渲染
2.都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.都有管理状态,React有redux,Vue有自己的Vuex(自适应vue,量身定做)

不同点:

1.监听数据变化的实现原理不同
Vue:通过 getter/setter以及一些函数的劫持,能精确知道数据变化。
React:通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的VDOM的重新渲染。
(Vue和React设计理念上的区别:Vue使用的是可变数据,而React更强调数据的不可变,两者没有好坏之分,Vue更加简单,而React构建大型应用的时候更加鲁棒。)

2.数据绑定不同
Vue与React的异同点_第1张图片
Vue:数据的双向绑定。父子组件之间通过事件的方式修改,组件与DOM之间可以通过v-model双向绑定。
React:数据流动是单向的,称之为onChange/setState()模式。

3.组合不同功能的方式
Vue:通过mixin
React:通过HoC(高阶组件)

4.组件通信的区别
Vue三种方式实现组件通信:
①父组件通过props向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据;
②子组件通过事件向父组件发送消息;
③可以通过provide/inject进行跨层级的通信。

React三种方式实现组件通信:
①父组件通过props可以向子组件传递数据或者回调;
②子组件通过回调函数向父组件发送消息;
③可以通过 context 进行跨层级的通信。

Vue与React的异同点_第2张图片

5.模板渲染方式的不同
Vue:通过一种拓展的HTML语法进行渲染
React:通过JSX渲染模板

Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现对这一点,这样的做法显得有些独特,会把HTML弄得很乱。
React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的,更加纯粹更加原生。

6.渲染过程不同
Vue:可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
React:在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认的优化。

如果应用中交互复杂,需要处理大量的UI变化,那么使用Virtual DOM是一个好主意。如果更新元素并不频繁,那么Virtual DOM并不一定适用,性能很可能还不如直接操控DOM。

7.框架本质不同
Vue:MVVM模式
React:严格上只针对MVC的view层

8.Vuex和Redux的区别
Vue:Vuex的数据是可变的,可以直接修改。数据由data属性在vue对象中管理;
React:Redux的数据是不可变的,每次都是用新state替换旧state;

你可能感兴趣的:(vue,vue)