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方法注册模块
- 使用
