Vue React 简单对比

框架

浏览数:174

2019-8-16

AD:资源代下载服务
/ 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纯函数

作者:meta