| 单文件直接引入 |
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 纯函数 |