今日筆者將參考 Vue.js 官方所提供的互動式教學，並以此為基礎再對部份內容做更深入的說明，那麼廢話不多說，我們直接開始吧！

.vue檔案格式：SFC

這種特別的檔案格式被稱為 Single-File Component (SFC)，它讓網頁所需要的所有內容，包含結構
、邏輯，以及外表樣式皆可以被寫入一個檔案之中。它整體有點類似HTML的Block格式，將三者分別放入<template>、<script>和<style>之中，如下方所示。

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

Vue.js會選擇採用SFC這種程式撰寫方式，是因為它有著以下幾大優點：

• 可以將相關的內容與模組整理在同一檔案，使專案的代碼更乾淨易閱讀
• 可以使編輯的CSS物件與呼叫JavaScript函數等等的行為更加結構化，不會與其他不相關的內容混在一起使得程式雜亂
• 此檔案格式有著優秀的編譯器，既快速又有著多項性能優化
• 編輯程式時IDE能夠提供更完善的自動完成(Auto-Complete)與檢查資料格式是否正確(type-checking)等功能

雖然有著以上幾種好處，我們也仍能使用常見的JavaScript檔案來完成我們的Vue專案，究竟要選擇使用哪一種呢，官方文件說明中建議將SFC用在 單一頁面程式 Single-Page Application (SPA)、靜態網站生成 Static-Site Generation (SPG)，以及有著複雜前端且能夠網頁build步驟能夠被優化的專案。

宣告式渲染Declarative Rendering

這是Vue的主要一大特色，所謂的宣告式渲染，便是在<template>這塊相似於HTML的區域中告訴它該如何顯示JavaScript程式的狀態，而當狀態改變時，其對應的HTML區塊不必重新載入也會跟著有所變動。這個功能主要是透過 reactive() 與 ref() 這兩個函式構成的。

下面是一個簡單的小程式，當我們點擊按鈕時，按鈕內的數字也會跟著增加：

<script setup>
import { reactive } from 'vue'

const counter = reactive({
  count: 0
})
</script>

<template>
  <h1>Click to change the count!</h1>
  <button @click="counter.count++">
    Count: {{ counter.count }}
  </button>
</template>

不過這兩個函式有什麼區別呢？何時又該使用哪一個？在這裡筆者做了簡單的說明。

ref() 其實是一種將 reactive() 重新包裝的函式，與後者不同的是，ref() 物件可儲存的資料型態較 reactive() 更多更廣泛。上方的程式改使用 ref 將會如下方範例所示：

<script setup>
import { ref } from 'vue'

const counter = ref(0)
</script>

<template>
  <h1>Click to change the count!</h1>
  <button @click="counter++">
    Count: {{ counter }}
  </button>
</template>

reactive() 雖然在資料型態上有著較多的限制，不過它勝在於同一物件可以有著多項「屬性」，有點類似C++中的struct，能將相似資料包進同一物之中。

// 使用reactive能將一個人的多筆資料存入同一物件，也就是person之中
const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

// 使用ref則須將各個資料單獨存放，不如reactive的明瞭
const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

此部份參考了StackOverflow - ref vs reactive in Vue 3? 的最佳解答