share

别点哈哈哈哈哈

大家别点

使用 Virtual DOM

提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

react的生命周期

vue的生命周期

性能

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

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

组件化

应用分拆成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。

Vue组件中HTML，JavaScript和CSS都写在一个文件之中；

vue某组件

React是all in js，通过js来生成html，JavaScript与JSX被写入同一个组件文件中。

react某组件

对象属性

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

组件传值

React:

父到子，父组件自定义属性，子通过props来获取父的属性值

子到父，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。（依赖 props 来传递事件的引用，并通过回调的方式来实现传值）

Vue:

父到子，子组件通过props来接收数据

子到父，this.$emit('方法', '值');

状态管理

Redux：

通过action创建函数，可以创建action~

创建 reducer，reducer是一个纯函数，接收action和旧的state,生成新的state.

一个项目有很多的reducers,我们要把他们整合到一起.

创建一个store：维持应用的 state；提供 getState() 方法获取 state；提供 dispatch(action) 触发reducers方法更新 state； 

创建action  (src/redux/actions/counter.js)

创建 reducer  (src/redux/reducers/counter.js )

整合reducers (src/redux/reducers.js)

 ( src/redux/store.js)

使用

react-redux提供了一个方法connect。connect接收两个参数，一个mapStateToProps,就是把redux的state，转为组件的Props，还有一个参数是mapDispatchToprops，就是把发射actions的方法，转为Props属性函数。

Vuex:

大家都用过   我就不说了

store注入和使用方式有一些区别

在Vuex中，$store被直接注入到了组件实例中，因此可以比较灵活的使用：使用dispatch、commit提交更新，通过mapState或者直接通过this.$store来读取数据。Vuex更加灵活一些，组件中既可以dispatch action，也可以commit updates。

在Redux中，我们每一个组件都需要显示的用connect把需要的props和dispatch连接起来。Redux中只能进行dispatch，不能直接调用reducer进行修改。

实现原理上来说，最大的区别是两点：Redux使用的是不可变数据，而Vuex的数据是可变的，因此，Redux每次都是用新state替换旧state，而Vuex是直接修改。Redux在检测数据变化的时候，是通过diff的方式比较差异的，而Vuex其实和Vue的原理一样，是通过getter/setter来比较的。

路由

React中，需要引入react-router库，使用时，路由器Router就是React的一个组件。

Router

Link组件用于取代元素，生成一个链接 ，跳转路由

Vue中，添加vue-router，需要将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。

 脚手架

React：create-react-app

Vue: vue-cli 

就这样叭

Vue官方对比其他框架