| 单文件直接引入 | vue.js | react.js + react-dom.js + babel.js |
| 虚拟DOM | √ | √ |
| 虚拟DOM区域（挂载区域） | el 参数值 | ReactDOM.render() 第二个参数值 |
| 数据驱动 | √ | √ |
| Model数据源 | 初始化，定义在data:{} 或 data () { return {} }里 | 在state里 constructor () { this.state = {} } |
| 数据渲染 | {{ }} 插值渲染 支持表达式 | JSX { } 表达式 |
| 列表渲染 | v-for | JSX里生成元素集合 {this.state.arr.map((item,index)=><li key={index}>{item}</li>)} |
| 条件渲染 | v-if | {this.state.show? <h1>条件渲染</h1> : null} |
| 动态绑定 | v-bind | title={this.state.title} |
| 数据更新 | 重新赋值 this.id = xxx;/ this.$set() | this.setState({id:xx}) 更新数据 |
| 指令 | √ | × |
| 添加class | class / :class | className=”red” |
| 动态切换class | :class=”[show? ‘class1’: ‘class2’]” | className={this.state.show ? “class1” : “class2”} |
| style行间 | style / :style | JSX写法 style={{color:”pink”}} |
| ref | √ | √ |
| 事件写法 | @click=”clickFn” | onClick={this.clickFn.bind(this)} |
| 事件处理函数 | methods: {}里 | 与render(){} 方法同级 |
| 生命周期钩子函数 | created() mounted() 等 | componentDidMount() componentDidUpdate() 等 |
| 创建组件 | Vue.component全局 / components:{} 局部 | function组件 / class组件 |
| 组件定义规则 | 1.kebab-case (短横线分隔命名) 2.PascalCase （大驼峰式） | 为了区分原生标签，组件必须大写 |
| 组件特点 | .vue文件 分html、js、css三块 | all in js |
| 数据流向 | 单向数据流 | 单向数据流 |
| 数据双向绑定 | v-model | 无 （但可以自己实现 绑定value值 + onchange事件更新value值） |
| 监听数据变化 | watch | getDerivedStateFromProps() |
| 父组件向子组件传值 | props传值 – 需要在子组件接收props:[‘xx’]，然后就可以使用xx值 | props传值 – 直接使用this.props.xx 取到值 |
| 子组件向父组件传值 | 子组件this.$emit触发父组件事件 | 子组件this.props.xx 触发父组件事件 |
| 路由 | vue-router | react-router |
| 状态管理 | vuex | react-redux |
| 修改状态 | 使用 mutations | 使用reducer纯函数 |
