Vue React 對比 Vue vs 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	{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	template上直接寫class 或動態綁定 :class	使用className className=“red”
style行間	template上直接寫style 或動態綁定 :style	jsx寫法 style={{color:“pink”}}
事件寫法	@click=“clickFn”	onClick={this.clickFn.bind(this)}
事件處理函數	methods: {}裏	與render(){} 方法同級
生命週期鉤子函數	created() mounted() 等	componentDidMount()
創建組件	Vue.component全局 / components:{} 局部	function組件 / class組件
組件特點	.vue文件 分html、js、css三塊	all in js
數據流向	單向數據流	單向數據流
數據雙向綁定	v-model	無 （但可以自己實現 綁定value值 + onchange事件更新value值）
監聽數據變化	watch	無
父組件向子組件傳值	props傳值 - 需要在子組件接收props:[]，然後就可以使用xx值	props傳值 - 直接使用this.props.xx 取到值
子組件向父組件傳值	子組件this.$emit觸發父組件事件	子組件this.props.xx 觸發父組件事件