Vue和React是我们熟知的前端两大框架，不过目前也出现一些新的轻量替代品，比如Lightue。本文将从各个方面来对比这三个框架，帮助开发者更好地进行取舍。
体积 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则小很多
应用创建和数据渲染
- 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'
})
应用创建方面可以看到三者都是首先创建一个Counter组件，然后将其用作根组件并挂载到#root元素上，不过我们可以看出它们的一些区别：Vue的组件是一个选项对象，而React的组件是一个渲染函数，Lightue的则是一个产生VDomSrc的工厂函数，且Lightue中习惯将Lightue缩写为L，将状态缩写为S。Vue的根组件可以不声明模板而是使用被挂载节点的内容作为模板；React使用jsx的方式来混写模板；Lightue则是用返回的VDomSrc对象作为模板。
开始计数
- 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),
...
}
添加计数方法，可以看到Vue每次都需要用this去访问数据和方法，略显不便，不过在Vue3中，添加了setup和ref改进了这点；React如果直接在useEffect里面使用setInterval修改counter的话，会发现计数到1就不增长了，这是因为useEffect无依赖所以只执行了一次，只抓住了第一次渲染时的counter值，所以还需要在函数里加一个counterMutable变量来保存counter的状态，开发心智负担较大；Lightue的话像Vue一样直接修改状态就行，不过清理的函数需要加在返回的对象$cleanup内。
绑定元素属性
- Vue
<div id="bind-attribute">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</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}>
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</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,
$$: '鼠标悬停几秒钟查看此处动态绑定的提示信息！'
})
}
可以看到Vue通过v-bind指令或简单的冒号来标明属性绑定；React是用的jsx的花括号来进行属性绑定；Lightue通过一个状态函数来建立属性与状态的关系。三者拥有不同的写法但是使用效果上没有大的差异。
未完待续
