【Vue】01 - 引用模式 與 API 風格

  • 15
  • 0
  • Vue
  • 2024-12-25

vue 的檔案模式有兩種: .html+.js 及 .vue
而vue 的撰寫方式又有兩種: 選項式 API (Options API) 及 組合式 API (Composition API)

如此不論是現有web 專案是使用html+js 的結構,或是想寫一個base-on vue 的新專案,都有相對應的solution

引用模式

HTML

基於html 檔案,在<script type="module">區域中寫vue 程式,並引用 vue 提供的 createApp 物件,呼叫mount 將vue 的相關功能掛載到DOM Element 上。

<!-- 用HTML 跟 OptionsAPI -->
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <!-- vue物件掛載到#app 上,就可以顯示messgae 的值 -->
  <h1>{{ message }}</h1> 
</div>

單檔案組件 SFC (Single-File Components)

基於vue 檔案,在 <script> 區域中寫vue 程式,並搭配 <template> 宣告DOM Element 。一個vue 檔可以形成一個獨立的組件,並重複被引用到其他vue 檔中。

<!-- 用SFC 跟 OptionsAPI -->
<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

<template>
  <h1>{{ message }}</h1>
</template>

API 風格

選項式 API (Options API)

使用export default 定義、回傳一個vue 物件。data() 裡面回傳響應式變數。

<!-- 用SFC 跟 OptionsAPI -->
<script>
  export default {
    data() {
      return {
        count: 0 
      }
    }
  }
</script>

<template>
  <p>Count is: {{ count }}</p>
</template>

組合式 API (Composition API)

與OptionsAPI 不同處在於,在HTML 中搭配setup(),SFC中搭配<script setup> 使用,看起來像在寫一個一般的javascript。響應式變量需要import 並配合 ref宣告才能使用。可以視為OptionsAPI 的改良,也因為少了一層編譯的關係,效能會比較好。但此方式在script tag 中的內容都是在描述vue 組件的功能。如果有額外的javascript 要寫,則需要採用原生的script 寫法。

<!-- 用SFC 跟 CompositionAPI -->
<script setup>
  import { ref } from 'vue'
  const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>

</template>

References:
https://cn.vuejs.org/api/composition-api-setup
https://ithelp.ithome.com.tw/m/articles/10296330