Vue和React

1. 从相同点讲起

1.1 所需要的环境相同

Node.js + npm

1.2 创建新项目的流程相似

• Vue使用vue-cli脚手架

cnpm install --global vue-cli
vue init webpack vue-demo
cnpm install
cnpm run dev

• React也有类似的创建方法，使用create-react-app

cnpm install -g create-react-app
create-react-app react_demo
cd react_demo/
cnpm start

1.3 项目文件也有相似之处

Vue项目文件详解：https://www.jianshu.com/p/b56f6b430cd6
React项目文件详解：https://www.jianshu.com/p/c0af6ef3666c
个别关键文件对照：

文件作用	Vue	React
根组件	App.vue	App.js
入口文件：挂载dom节点	Main.js	Index.js
首页	Index.html	Index.html

1.4 父子组件间数据传递方式相同

都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递

1.5 都有管理状态

React有redux, Vue有自己的Vuex

1.6 都有支持native的方案

• React的React native
• Vue的weex

1.7 都支持服务器端渲染

1.8 都是数据驱动视图

2. Vue和React的一些不同点

2.1组件写法不一样

• React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'
• Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件

2.2 数据绑定

• vue实现了数据的双向绑定，如使用v-model
• react数据流动是单向

state对象

• state对象在react应用中不可变的,需要使用setState方法更新状态
• 在vue中,state对象不是必须的,数据由data属性在vue对象中管理

virtual DOM不一样

• vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树
• 对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制