共计 1169 个字符，预计需要花费 3 分钟才能阅读完成。
| / | Vue | React |
|---|---|---|
| 单文件直接引入 | 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 | 无 |
| 父组件向子组件传值 | props 传值 – 需要在子组件接收 props:[‘xx’]，然后就可以使用 xx 值 | props 传值 – 直接使用 this.props.xx 取到值 |
| 子组件向父组件传值 | 子组件 this.$emit 触发父组件事件 | 子组件 this.props.xx 触发父组件事件 |
| 路由 | vue-router | react-router |
| 状态管理 | vuex | react-redux |
| 修改状态 | 使用 mutations | 使用 reducer 纯函数 |
正文完
发表至： javascript
2019-08-15
