react与vue的区别

本文是针对react与vue的最新版本来区分两种语言的不同之处。（GitHub地址：https://github.com/OmegaMibai）

 

1、初始化方式不同

React：this.state={}

Vue :    data(){return{   }}

 

2、路由跳转的方式不同

React：this.props.history.push('   ')

Vue:     this.$router.push('   ')

 

3、获取地址栏参数方式不同

React：this.props.match.params('   ')

Vue:     this.$router.params('   ')

 

4、修改模型数据方式不同

React：this.setState({变量名  :  值})

Vue:     this.变量名=值

 

5、数据绑定

React：纯单向数据流

Vue:      双向数据绑定

 

6、构建工具不同

React：Create React App 

Vue：   vue-cli

 

7、数据是否可变

React：  数据不可变(immutable)。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染(适合大型应用)。

vue：     数据可变(响应式)。通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

 

8、模板渲染方式

React：通过js来生成HTML，即jsx(设计思路：all in js)。

Vue：   把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

 

9、生命周期不同

React：

 componentWillMount、componentDidMount、componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、componentDidUpdate、componentWillUnmount。

 

 

Vue:

beforeCreate、Created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

 

10、配置路由的方式不同

React：

Vue：