Vue和React是我們熟知的前端兩大框架，不過(guò)目前也出現(xiàn)一些新的輕量替代品竟趾，比如Lightue冯事。本文將從各個(gè)方面來(lái)對(duì)比這三個(gè)框架，幫助開(kāi)發(fā)者更好地進(jìn)行取舍。
體積 min+br
- Vue: 32.5kB / 48.8kB(with compiler)
https://unpkg.com/vue@3.2.24/dist/vue.runtime.global.prod.js
https://unpkg.com/vue@3.2.24/dist/vue.global.prod.js - React: 45.3kB
https://unpkg.com/react@17.0.2/umd/react.production.min.js
https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js - Lightue: 1.6kB
https://unpkg.com/lightue@0.2.2/lightue.min.js
體積方面Vue辕录、React差不多睦霎，Lightue則小很多
應(yīng)用創(chuàng)建和數(shù)據(jù)渲染
- Vue
<div id="root">
Counter: {{ counter }}
</div>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#root')
- React
<div id="root">
</div>
function Counter() {
const [counter, setCounter] = React.useState(0)
return <div className='counter'>Counter: {counter}</div>
}
ReactDOM.createRoot(
document.getElementById('root')
).render(<Counter />)
- Lightue
<div id="root">
</div>
var L = Lightue
function Counter() {
var S = Lightue.useState({
counter: 0
})
return {
$class: {counter: true},
$$: () => 'Counter: ' + S.counter
}
}
L(Counter(), {
el: '#root'
})
應(yīng)用創(chuàng)建方面可以看到三者都是首先創(chuàng)建一個(gè)Counter組件，然后將其用作根組件并掛載到#root元素上走诞，不過(guò)我們可以看出它們的一些區(qū)別：Vue的組件是一個(gè)選項(xiàng)對(duì)象副女，而React的組件是一個(gè)渲染函數(shù)，Lightue的則是一個(gè)產(chǎn)生VDomSrc的工廠函數(shù)速梗，且Lightue中習(xí)慣將Lightue縮寫(xiě)為L(zhǎng)肮塞，將狀態(tài)縮寫(xiě)為S。Vue的根組件可以不聲明模板而是使用被掛載節(jié)點(diǎn)的內(nèi)容作為模板姻锁；React使用jsx的方式來(lái)混寫(xiě)模板枕赵；Lightue則是用返回的VDomSrc對(duì)象作為模板。
開(kāi)始計(jì)數(shù)
- Vue
mounted() {
this.timer = setInterval(() => {
this.counter++
}, 1000)
},
beforeUnmount() {
clearInterval(this.timer)
}
- React
React.useEffect(() => {
var counterMutable = counter
const timer = setInterval(() => {
counterMutable ++
setCounter(counterMutable)
}, 1000)
return () => {
clearInterval(timer)
}
}, [])
- Lightue
var interval = setInterval(() => {
S.counter++
}, 1000)
return {
$cleanup: () => clearInterval(interval),
...
}
添加計(jì)數(shù)方法位隶，可以看到Vue每次都需要用this去訪問(wèn)數(shù)據(jù)和方法拷窜，略顯不便，不過(guò)在Vue3中涧黄，添加了setup和ref改進(jìn)了這點(diǎn)篮昧；React如果直接在useEffect里面使用setInterval修改counter的話，會(huì)發(fā)現(xiàn)計(jì)數(shù)到1就不增長(zhǎng)了笋妥，這是因?yàn)閡seEffect無(wú)依賴(lài)所以只執(zhí)行了一次懊昨，只抓住了第一次渲染時(shí)的counter值，所以還需要在函數(shù)里加一個(gè)counterMutable變量來(lái)保存counter的狀態(tài)春宣，開(kāi)發(fā)心智負(fù)擔(dān)較大酵颁；Lightue的話像Vue一樣直接修改狀態(tài)就行，不過(guò)清理的函數(shù)需要加在返回的對(duì)象$cleanup內(nèi)月帝。
綁定元素屬性
- Vue
<div id="bind-attribute">
<span v-bind:title="message">
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息躏惋！
</span>
</div>
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
- React
const [message, setMessage] = React.useState('You loaded this page on ' + new Date().toLocaleString())
return <div id="bind-attribute">
<span title={message}>
鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！
</span>
</div>
- Lightue
var S = Lightue.useState({
message: 'You loaded this page on ' + new Date().toLocaleString()
})
return {
_id: 'bind-attribute',
$$: L.span({
_title: () => S.message,
$$: '鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息嚷辅！'
})
}
可以看到Vue通過(guò)v-bind指令或簡(jiǎn)單的冒號(hào)來(lái)標(biāo)明屬性綁定簿姨；React是用的jsx的花括號(hào)來(lái)進(jìn)行屬性綁定；Lightue通過(guò)一個(gè)狀態(tài)函數(shù)來(lái)建立屬性與狀態(tài)的關(guān)系簸搞。三者擁有不同的寫(xiě)法但是使用效果上沒(méi)有大的差異扁位。
未完待續(xù)
