Vue和React是我們熟知的前端兩大框架，不過目前也出現(xiàn)一些新的輕量替代品，比如Lightue。本文將從各個方面來對比這三個框架，幫助開發(fā)者更好地進行取舍。

體積 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)建一個Counter組件，然后將其用作根組件并掛載到#root元素上，不過我們可以看出它們的一些區(qū)別：Vue的組件是一個選項對象，而React的組件是一個渲染函數(shù)，Lightue的則是一個產(chǎn)生VDomSrc的工廠函數(shù)，且Lightue中習(xí)慣將Lightue縮寫為L，將狀態(tài)縮寫為S。Vue的根組件可以不聲明模板而是使用被掛載節(jié)點的內(nèi)容作為模板；React使用jsx的方式來混寫模板；Lightue則是用返回的VDomSrc對象作為模板。

開始計數(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),
    ...
}

添加計數(shù)方法，可以看到Vue每次都需要用this去訪問數(shù)據(jù)和方法，略顯不便，不過在Vue3中，添加了setup和ref改進了這點；React如果直接在useEffect里面使用setInterval修改counter的話，會發(fā)現(xiàn)計數(shù)到1就不增長了，這是因為useEffect無依賴所以只執(zhí)行了一次，只抓住了第一次渲染時的counter值，所以還需要在函數(shù)里加一個counterMutable變量來保存counter的狀態(tài)，開發(fā)心智負擔較大；Lightue的話像Vue一樣直接修改狀態(tài)就行，不過清理的函數(shù)需要加在返回的對象$cleanup內(nèi)。

綁定元素屬性

• Vue

<div id="bind-attribute">
  <span v-bind:title="message">
    鼠標懸停幾秒鐘查看此處動態(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}>
      鼠標懸停幾秒鐘查看此處動態(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,
      $$: '鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！'
    })
  }

可以看到Vue通過v-bind指令或簡單的冒號來標明屬性綁定；React是用的jsx的花括號來進行屬性綁定；Lightue通過一個狀態(tài)函數(shù)來建立屬性與狀態(tài)的關(guān)系。三者擁有不同的寫法但是使用效果上沒有大的差異。

未完待續(xù)