前端框架Vue, React, Lightue各方面对比

Vue和React是我们熟知的前端两大框架，不过目前也出现一些新的轻量替代品，比如Lightue。本文将从各个方面来对比这三个框架，帮助开发者更好地进行取舍。

体积 min+br

• Vue: 32.5kB / 48.8kB(with compiler)
  https://unpkg.com/[email protected]/dist/vue.runtime.global.prod.js
  https://unpkg.com/[email protected]/dist/vue.global.prod.js
• React: 45.3kB
  https://unpkg.com/[email protected]/umd/react.production.min.js
  https://unpkg.com/[email protected]/umd/react-dom.production.min.js
• Lightue: 1.6kB
  https://unpkg.com/[email protected]/lightue.min.js

体积方面Vue、React差不多，Lightue则小很多

应用创建和数据渲染

• Vue

  Counter: {{ counter }}

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#root')

• React

function Counter() {
  const [counter, setCounter] = React.useState(0)
  return 
Counter: {counter}
}
ReactDOM.createRoot(
  document.getElementById('root')
).render()

• Lightue

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

  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  

  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 

    
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    
  

• 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通过一个状态函数来建立属性与状态的关系。三者拥有不同的写法但是使用效果上没有大的差异。

未完待续