背景

Vue 作為一款流行的前端框架，提供了多種方式來定義組件，包括單文件組件 (SFC)、渲染函數(shù) (Render Functions)、JSX/TSX 以及函數(shù)式組件 (Functional Components)。不同的方式適用于不同的場(chǎng)景，開發(fā)者在選擇時(shí)需要考慮可讀性、性能和靈活性等因素。本文將對(duì)這四種方式進(jìn)行詳細(xì)對(duì)比，幫助你找到最適合自己項(xiàng)目的方案。

1. SFC (Single-File Component)

單文件組件，以 *.vue 作為文件擴(kuò)展名，是 Vue 官方推薦的方式。

特點(diǎn):

• 模板和邏輯分離，結(jié)構(gòu)清晰，官方推薦。
• 支持 Vue 內(nèi)置功能，如 script setup、CSS 作用域、單文件組件熱更新等。
• 適合大多數(shù) Vue 項(xiàng)目，代碼組織更直觀。

Test.vue 代碼如下:

<script setup lang="ts">
import { ref } from "vue";
defineProps<{
  text: string;
}>();

const num = ref(0);
</script>
<template>
  <div class="aaa">
    {{ text }}
    <div @click="num++">{{ num }}</div>
  </div>
</template>

優(yōu)點(diǎn):

• 代碼結(jié)構(gòu)清晰，符合 MVVM 模式，模板部分易讀。
• script setup 提供更簡(jiǎn)潔的語法，減少模板和邏輯之間的代碼切換。
• 具有良好的工具鏈支持 (Vue 官方生態(tài)、Vite、Vue Loader 等)。

缺點(diǎn):

• 需要額外的構(gòu)建工具 (如 Vite 或 Webpack) 進(jìn)行編譯，不能直接在瀏覽器運(yùn)行。
• 在某些場(chǎng)景下 (如動(dòng)態(tài)創(chuàng)建組件) 可能不如渲染函數(shù)靈活。

2. 渲染函數(shù) (Render Functions)

Vue 提供了一個(gè) h() 函數(shù)用于創(chuàng)建虛擬節(jié)點(diǎn) vnodes。

特點(diǎn):

• 需要引入 h 和 defineComponent 函數(shù)，沒有模板語法。
• 適合動(dòng)態(tài)組件或 UI 庫開發(fā)。

h 是一個(gè) helper 函數(shù)，用于創(chuàng)建虛擬 DOM（VNode）。它是 createElement 的別名，類似于 React 里的 React.createElement。

Test.ts 代碼如下：

import { defineComponent, h, ref } from "vue";

export default defineComponent({
  props: {
    text: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const num = ref(0);
    return () =>
      h("div", { class: "aaa" }, [props.text, h("div", { onClick: () => num.value++ }, num.value)]);
  }
});

優(yōu)點(diǎn):

• 代碼更靈活，適用于需要?jiǎng)討B(tài)控制 VNode 結(jié)構(gòu)的場(chǎng)景，如表單渲染器、可拖拽組件等。
• 體積更小，不需要 SFC 解析器。

缺點(diǎn):

• 代碼可讀性較低，沒有模板語法，編寫復(fù)雜組件時(shí)維護(hù)成本較高。
• 開發(fā)體驗(yàn)不如 SFC 友好，特別是對(duì)于不熟悉 JSX/TSX 的開發(fā)者。

3. JSX / TSX

JSX 和 TSX 是 React 的語法擴(kuò)展，Vue 也支持這種語法。

特點(diǎn):

• 語法類似 React，允許在 Vue 組件中使用 JSX/TSX 語法。
• 適用于更靈活的邏輯處理，且無需引入 h() 函數(shù)。

tsconfig.json 需要配置:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "vue"
    // ...
  }
}

vite.config.ts 需要配置 vueJsx 插件:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
  // ...
});

Test.tsx 代碼如下:

import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    text: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const num = ref(0);
    return () => (
      <div class="aaa">
        {props.text}
        <div onClick={() => num.value++}>{num.value}</div>
      </div>
    );
  }
});

優(yōu)點(diǎn):

• 代碼靈活，適用于復(fù)雜 UI 組件開發(fā)。
• 在 TypeScript 項(xiàng)目中擁有更好的類型推導(dǎo)支持。

缺點(diǎn):

• 需要額外的 @vitejs/plugin-vue-jsx 插件支持，并在 tsconfig.json 配置 JSX 選項(xiàng)。
• 代碼風(fēng)格不符合 Vue 傳統(tǒng)的模板語法，可能不適合所有團(tuán)隊(duì)。

4. 函數(shù)式組件 (Functional Components) — 不推薦

特點(diǎn):

• 組件本質(zhì)上是一個(gè)純函數(shù)，ref 只能定義在組件外部，屬于全局共享狀態(tài)。
• 適用于只依賴 props 進(jìn)行渲染，且無狀態(tài) (stateless) 的組件。

Test.tsx 代碼如下:

import { ref, type FunctionalComponent } from "vue";

interface Props {
  text: string;
}

const num = ref(0);
export const TestFunctionalCom: FunctionalComponent<Props> = (props) => {
  return (
    <div class="aaa">
      {props.text}
      <div onClick={() => num.value++}>{num.value}</div>
    </div>
  );
};

優(yōu)點(diǎn):

• 代碼簡(jiǎn)單，適用于簡(jiǎn)單的展示組件 (如按鈕、圖標(biāo)等)。
• 沒有響應(yīng)式數(shù)據(jù)追蹤開銷，性能更高。

缺點(diǎn):

• 不能在組件內(nèi)部使用 ref 或 reactive，狀態(tài)必須是全局變量或 props 傳入。
• 全局 ref 可能導(dǎo)致多個(gè)組件實(shí)例共享狀態(tài)，引發(fā)意外的狀態(tài)同步問題。

總結(jié)

在實(shí)際開發(fā)中，SFC 是最推薦的方式，大多數(shù) Vue 組件都可以用 SFC 實(shí)現(xiàn)。對(duì)于動(dòng)態(tài) VNode 結(jié)構(gòu)，可以考慮 渲染函數(shù) 或 JSX/TSX。函數(shù)式組件 在 Vue 3 中的使用場(chǎng)景很少，通常不推薦使用。

以上就是Vue3定義組件的四種方式的詳細(xì)內(nèi)容，更多關(guān)于Vue3定義組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論