Vue React 簡(jiǎn)單對(duì)比

tomorrowwu 發(fā)布于2019-08-26 10:47 / 2962人閱讀

摘要：?jiǎn)挝募苯右胩摂M虛擬區(qū)域掛載區(qū)域參數(shù)值第二個(gè)參數(shù)值數(shù)據(jù)驅(qū)動(dòng)數(shù)據(jù)源初始化，定義在或里在里數(shù)據(jù)渲染插值渲染支持表達(dá)式表達(dá)式列表渲染里生成元素集合條件渲染條件渲染動(dòng)態(tài)綁定數(shù)據(jù)更新重新賦值更新數(shù)據(jù)指令添加動(dòng)態(tài)切換行間寫法事件寫法事件處理函

/	Vue	React
單文件直接引入	vue.js	react.js + react-dom.js + babel.js
虛擬DOM	√	√
虛擬DOM區(qū)域（掛載區(qū)域）	el 參數(shù)值	ReactDOM.render() 第二個(gè)參數(shù)值
數(shù)據(jù)驅(qū)動(dòng)	√	√
Model數(shù)據(jù)源	初始化，定義在data:{} 或 data () { return {} }里	在state里 constructor () { this.state = {} }
數(shù)據(jù)渲染	{{ }} 插值渲染支持表達(dá)式	JSX { } 表達(dá)式
列表渲染	v-for	JSX里生成元素集合 {this.state.arr.map((item,index)=> {item} )}
條件渲染	v-if	{this.state.show? 條件渲染 : null}
動(dòng)態(tài)綁定	v-bind	title={this.state.title}
數(shù)據(jù)更新	重新賦值 this.id = xxx;/ this.$set()	this.setState({id:xx}) 更新數(shù)據(jù)
指令	√	×
添加class	class / :class	className="red"
動(dòng)態(tài)切換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)}
事件處理函數(shù)	methods: {}里	與render(){} 方法同級(jí)
生命周期鉤子函數(shù)	created() mounted() 等	componentDidMount() componentDidUpdate() 等
創(chuàng)建組件	Vue.component全局 / components:{} 局部	function組件 / class組件
組件定義規(guī)則	1.kebab-case (短橫線分隔命名) 2.PascalCase （大駝峰式）	為了區(qū)分原生標(biāo)簽，組件必須大寫
組件特點(diǎn)	.vue文件分html、js、css三塊	all in js
數(shù)據(jù)流向	單向數(shù)據(jù)流	單向數(shù)據(jù)流
數(shù)據(jù)雙向綁定	v-model	無（但可以自己實(shí)現(xiàn) 綁定value值 + onchange事件更新value值）
監(jiān)聽數(shù)據(jù)變化	watch	getDerivedStateFromProps()
父組件向子組件傳值	props傳值 - 需要在子組件接收props:["xx"]，然后就可以使用xx值	props傳值 - 直接使用this.props.xx 取到值
子組件向父組件傳值	子組件this.$emit觸發(fā)父組件事件	子組件this.props.xx 觸發(fā)父組件事件
路由	vue-router	react-router
狀態(tài)管理	vuex	react-redux
修改狀態(tài)	使用 mutations	使用reducer純函數(shù)