React和Vue部分实例比较

数据双向绑定比较

react数据是单向流动的，state状态更改只能通过this.setState方法来更新，然后react监听到state跟新，然后重新执行render函数，使用其虚拟DOM技术高效的进行渲染。

vue天生的数据双向绑定的（和用户可以输入更改的标签一起使用的时候），数据天然可以双向流动。

react要实现双向绑定的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class HelloMessage extends React.Component {
  constructor(props) {
      super(props);
      this.state = {value: 'Hello Runoob!'};
      this.handleChange = this.handleChange.bind(this);
  }
  handleChange(event) {
    this.setState({value: event.target.value});
  }
  render() {
    return <div>
            <input type="text" value={this.state.value} onChange={this.handleChange} />
            <h4>{this.state.value}</h4>
           </div>;
  }
}
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);
</script>

</body>
</html>

vue的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="message" >
  <h4>{{ message }}</h4>    
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Runoob!'
  }
})
</script>
</body>
</html>

父子组件通信比较

react:

父传子，通过给子组件设置属性message的方式，子组件中通过this.props.message方式访问数据

子传父，父组件给子组件绑定了属性onChange="this.doOnChange",子组件中直接调用this.props.onChange(data)就可以触发父组件的doOnChange方法并把数据data传递过去

vue:

父传子，通过传递props属性message，props属性需要在子组件中显式的申明message，然后子组件可以像message是自己的属性一样使用

子传父，通过触发绑定到子组件的事件，如@onChange="doOnChange"，在事件的执行函数中携带参数data（子组件的数据）方式把data传递给父组件的doOnChange实现，this. $emit('onChange', data)

redux和vuex

redux的简单例子可以参考：https://www.cnblogs.com/chuaWeb/p/12546657.html

vuex

简单的demo

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
// 触发状态变更,必须是同步的
store.commit('increment')
// 任何由‘increment'导致的状态变更在此刻都应该完成
console.log(store.state.count) // -> 1


// 子组件中使用前,先将store注入根实例
const app = new Vue({
  el: '#app',
  // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
// 子组件中，直接this.$store指向单一状态树,使用计算属性将某状态作为依赖
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

vuex的核心：

state，vue的单一状态树，包含了应用的所有状态数据。
- mapState 辅助函数帮助生成计算属性
getter，帮助我们派生状态，对原生状态做封装，主要用在多个场景需要用到同一个派生状态的情况
- mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
mutation，更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，可以提交额外参数，对象方式等。mutation必须是同步函数
- mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要先在根节点注入 store）
action, 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。Action 通过 store.dispatch 方法触发
- mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
module，将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。可以启用命名空间
- 使用 store.registerModule 方法注册模块