user@dailytools:/framework-compare█

React vs Vue 比較

> 響應式系統比較展示

點擊按鈕觀察哪些程式碼會重新執行

Vue 3重新執行行數: 2
<script setup>
import { ref } from 'vue'
const count = ref(0)
const name = ref('Vue')
function increment() {
  count.value++
}
</script>
<template>
  <Header />
  <div>Count: {{ count }}</div>
  <button @click="increment">+1</button>
  <Footer :name="name" />
</template>

React重新執行行數: 14
import { useState } from 'react'
function App() {
  const [count, setCount] = useState(0)
  const [name] = useState('React')
  function increment() {
    setCount(count + 1)
  }
  // setState 後整個函式會重新執行
  return (
    <>
      <Header />
      <div>Count: {count}</div>
      <button onClick={increment}>+1</button>
      <Footer name={name} />
    </>
  )
}

原理說明

Vue 3: Vue 3 使用 Proxy 建立細粒度的依賴追蹤。當響應式資料改變時，只有真正讀取過該資料的 template 部分會被重新渲染。script setup 中的程式碼不會重新執行。

React: React 使用 setState/useState 觸發更新。當狀態改變時，React 會重新執行整個元件函式（包含 JSX），需要使用 React.memo 或 useMemo 來避免不必要的重新計算。

$ cat /etc/author.conf

喜歡這個專案嗎？

您的支持能幫助我持續開發更多實用工具！

[ Buy me a coffee ] [ Portaly ] [ Blog ]