• 首页
  • vue
  • vue 和 react 的相同点以及不同点

vue 和 react 的相同点以及不同点


文章目录



vue 和 react 的相同点

1.他们都是JavaScript的框架,专注于创造前端的富应用

2.不同于早期的JavaScript框架“功能齐全”,React与Vue只有框架的骨架,其他的功能如路由、状态管理等是框架分离的组件。

3.Vue.js(2.0版本)与React的其中最大一个相似之处,就是他们都使用了一种叫’Virtual DOM’的东西都鼓励组件化

4.看到React和Vue都有’props’的概念,这是properties的简写。props在组件中是一个特殊的属性,允许父组件往子组件传送数据。

5.React和Vue都有自己的构建工具,你可以使用它快速搭建开发环境

6.React和Vue都有很好的Chrome扩展工具去帮助你找出bug。

7.Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于,两个框架都专注于UI层,其他的功能如路由、状态管理等都交由同伴框架进行处理。


React的特点

1.数据流单向

2.React推广了Virtual DOM,并创造了新的语法——JSX,JSX允许开发者在JavaScript中书写HTML

3.React一样由如Facebook这类大公司维护

4.props对于子组件来说是必须的,因为它依赖一个“单一数据源”作为它的“状态”

5.React可以使用Create React App (CRA)

6.而React的react-router和react-redux则是由社区成员维护,它们都不是官方维护的。

7.React与Vue最大的不同是模板的编写

8.在React中你需要使用setState()方法去更新状态

多数情况下,框架内置的状态管理是不足以支撑大型应用的,Redux或Vuex等状态管理方案是必须使用的


vue 的特点

1.数据双向绑定

2.Vue使用模板系统而不是JSX,使其对现有应用的升级更加容易,这是因为模板用的就是普通的HTML,通过Vue来整合现有的系统是比较容易的,不需要整体重构

3.Vue主要是由一位开发者进行维护的

4.而在Vue中,props略有不同。它们一样是在组件中被定义,但Vue依赖于模板语法,你可以通过模板的循环函数更高效地展示传入的数据。

5.Vue对应的则是vue-cli

6.Vue的核心团队维护着vue-router和vuex

7.React与Vue最大的不同是模板的编写

8.在Vue中,state对象并不是必须的,数据由data属性在Vue对象中进行管理。

9.Vue的解决方案适用于小型应用,但对于对于大型应用而言不太适合


组件通信的区别

Vue1.0中可以实现两种双向绑定:父子组件之间,props可以双向绑定;组件与DOM之间可以通过v-model双向绑定。Vue2.x中去掉了第一种,也就是父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且Vue2.x已经不鼓励组件对自己的 props进行任何修改了。

React一直不支持双向绑定,提倡的是单向数据流,称之为onChange/setState()模式。不过由于我们一般都会用Vuex以及Redux等单向数据流的状态管理框架,因此很多时候我们感受不到这一点的区别了。


模板渲染方式的不同

在表层上,模板的语法不同,React是通过JSX渲染模板。而Vue是通过一种拓展的HTML语法进行渲染,但其实这只是表面现象,毕竟React并不必须依赖JSX。

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

举个例子,说明React的好处:react中render函数是支持闭包特性的,所以我们import的组件在render中可以直接调用。但是在Vue中,由于模板中使用的数据都必须挂在 this 上进行一次中转,所以我们import 一个组件完了之后,还需要在 components 中再声明下,这样显然是很奇怪但又不得不这样的做法。


渲染过程不同

Vue可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

React在应用的状态被改变时,全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制,但Vue将此视为默认的优化。

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


框架本质不同

Vue本质是MVVM框架,由MVC发展而来;

React是前端组件化框架,由后端组件化发展而来。


Vuex和Redux的区别

从表面上来说,store注入和使用方式有一些区别。在Vuex中,$store被直接注入到了组件实例中,因此可以比较灵活的使用:使用dispatch、commit提交更新,通过mapState或者直接通过this.$store来读取数据。在Redux中,我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。另外,Vuex更加灵活一些,组件中既可以dispatch action,也可以commit updates,而Redux中只能进行dispatch,不能直接调用reducer进行修改。

从实现原理上来说,最大的区别是两点:Redux使用的是不可变数据,而Vuex的数据是可变的,因此,Redux每次都是用新state替换旧state,而Vuex是直接修改。Redux在检测数据变化的时候,是通过diff的方式比较差异的,而Vuex其实和Vue的原理一样,是通过getter/setter来比较的,这两点的区别,也是因为React和Vue的设计理念不同。React更偏向于构建稳定大型的应用,非常的科班化。相比之下,Vue更偏向于简单迅速的解决问题,更灵活,不那么严格遵循条条框框。因此也会给人一种大型项目用React,小型项目用Vue的感觉。

出自:vue 和 react 的相同点以及不同点

回到顶部