Vue React 簡單對比

/	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	getDerivedStateFromProps()
父組件向子組件傳值	props傳值 - 須要在子組件接收props:['xx']，而後就可使用xx值	props傳值 - 直接使用this.props.xx 取到值
子組件向父組件傳值	子組件this.$emit觸發父組件事件	子組件this.props.xx 觸發父組件事件
路由	vue-router	react-router
狀態管理	vuex	react-redux
修改狀態	使用 mutations	使用reducer純函數