vue3 組合式 api 單文件組件寫法

来源:https://www.cnblogs.com/chenyuanrumeng/archive/2023/08/17/17636643.html
-Advertisement-
Play Games

本篇博文將深入介紹 Vue3 組合式 API 和單文件組件的寫法。我們將從安裝和配置 Vue3 開始，然後逐步詳細展示如何創建一個簡單的單文件組件。除此之外，我們還將討論使用組合式 API 的常見模式和技巧，例如響應式狀態管理、替代生命周期鉤子函數的方法、自定義組合式 API、數據的響應式處理和偵聽... ...


1 Vue3 組合式 API 的基本原理和理念

1.1 Vue3 中的 Composition API

Vue3 中的 Composition API 是一種新的編寫組件邏輯的方式，它提供了更好的代碼組織、類型推導、測試支持和復用性。相比於 Vue2 的 Options API，Composition API 更加靈活和可擴展。

在 Composition API 中，我們使用 setup 函數來定義組件的邏輯部分。setup 函數是一個特殊的函數，在創建組件實例之前被調用，並且接收兩個參數：props 和 context。props 是傳入組件的屬性集合，而 context 包含了一些與組件關聯的方法和數據。

1.2 與 Vue2 Options API 的對比

與 Vue2 的 Options API 相比，Composition API 具有以下優勢：

  • 更好的代碼組織：通過將相關邏輯放在同一個函數內部，可以更清晰地組織代碼。
  • 類型推導：由於 setup 函數是一個普通的 JavaScript 函數，因此可以更容易地獲得類型推導的支持。
  • 測試支持：由於邏輯被封裝在獨立的函數中，可以更方便地進行單元測試。
  • 復用性：可以將邏輯抽象為自定義 Hook，併在多個組件中重用。

1.3 為什麼選擇使用組合式 API

使用組合式 API 可以帶來以下好處：

  • 更好的代碼組織：將相關邏輯放在同一個函數內部，使代碼更易於理解和維護。
  • 更好的類型推導：由於 setup 函數是一個普通的 JavaScript 函數，可以獲得更好的類型推導支持，減少錯誤。
  • 更好的測試支持：邏輯被封裝在獨立的函數中，可以更方便地進行單元測試。
  • 更高的復用性：可以將邏輯抽象為自定義 Hook，併在多個組件中重用。

使用組合式 API 可以提供更好的開發體驗和代碼質量，使得 Vue3 的開發更加靈活和可擴展。

2 安裝和配置 Vue3

為了安裝和配置 Vue3，您需要按照以下步驟進行操作：

2.1 引入 Vue3 的最新版本

首先，您需要在項目中引入 Vue3 的最新版本。可以通過使用 npm 或 yarn 來安裝 Vue3。

如果使用 npm，請運行以下命令：

npm install vue@next

如果使用 yarn，請運行以下命令：

yarn add vue@next

這將會安裝 Vue3 及其相關依賴項。

2.2 創建 Vue 應用程式的基本配置

一旦您安裝了 Vue3，您可以開始創建 Vue 應用程式的基本配置。

在你的項目中創建一個新文件，例如main.js，並添加以下代碼：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

上述代碼導入了createApp函數和根組件App，然後調用createApp函數創建一個 Vue 應用程式實例，並將根組件傳遞給它。最後，使用mount方法將 Vue 應用程式掛載到 HTML 頁面上的元素上（此處假設有一個 id 為app的元素）。

接下來，在您的項目中創建一個名為App.vue的文件，並添加以下代碼作為根組件的模板：

<template>
  <div id="app">
    <!-- Your application content here -->
  </div>
</template>

<script>
export default {
  // Your component options here
}
</script>

<style>
/* Your component styles here */
</style>

在上述代碼中，您可以將應用程式的內容放置在<div id="app">元素內部。

3 創建一個簡單的單文件組件

3.1 創建一個.vue 文件

首先，在您的項目中創建一個新的.vue文件，例如MyComponent.vue。

3.2 編寫組件模板

在MyComponent.vue文件中，編寫組件的模板。模板部分定義了組件的結構和佈局。以下是一個示例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">Increment</button>
  </div>
</template>

上述代碼展示了一個包含標題和按鈕的簡單組件。標題使用雙花括弧插值綁定到message變數，按鈕使用@click指令綁定到increment方法。

3.3 實現組件的組合式 API 邏輯

3.3.1 重構原有代碼

接下來，您需要將原有的邏輯重構為組合式 API 形式。在MyComponent.vue文件中，添加如下代碼：

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

export default {
  setup() {
    const message = ref('Hello, Vue!');
    
    function increment() {
      message.value += '!';
    }
    
    return {
      message,
      increment
    };
  }
}
</script>

上述代碼使用setup函數來實現組合式 API 的邏輯。在setup函數內部，我們使用ref函數創建了一個響應式數據message，並定義了一個名為increment的方法。

最後，通過return語句將需要在模板中使用的數據和方法導出。

3.3.2 創建和導出可復用的邏輯函數

如果您希望將某些邏輯代碼抽離成可復用的函數，可以創建並導出它們。例如，在同一個文件中添加以下代碼：

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

function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment
    };
  }
}
</script>

上述代碼創建了一個名為useCounter的可復用邏輯函數，該函數返回一個包含計數器值和增加計數器的方法的對象。

然後，在setup函數內部，我們調用useCounter函數，並將其返回值解構為count和increment變數。

最後，通過return語句將這些變數導出供模板使用。

3.4 在應用程式中使用組件

要在 Vue3 應用程式中使用組件，您需要按照以下步驟進行操作：

  1. 創建一個組件：首先，創建一個.vue 文件來定義您的組件。該文件包含模板、樣式和邏輯代碼。例如，創建一個名為"HelloWorld.vue"的文件。
<template>
  <div>
    <h1>{{ greeting }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello, World!'
    }
  }
}
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
  1. 導入並註冊組件：在您的主應用程式文件（通常是 main.js）中，導入並全局註冊您的組件。
import { createApp } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

const app = createApp()
app.component('hello-world', HelloWorld)
app.mount('#app')
  1. 在應用程式中使用組件：現在，您可以在應用程式的模板中使用您的組件了。只需將組件名稱作為自定義元素添加到模板中即可。
<div id="app">
  <hello-world></hello-world>
</div>

這樣，您的組件就會在應用程式中顯示出來，並且它的數據和邏輯也會生效。

請註意，在上述示例中，我們使用了單文件組件的形式編寫組件。這是 Vue 推薦的方式，它將組件的模板、樣式和邏輯封裝在一個文件中，使代碼更加模塊化和可維護。

4 使用 Vue3 組合式 API 的常見模式和技巧

當使用 Vue3 的組合式 API 時，有一些常見的模式和技巧可以幫助您更好地組織和管理代碼。

4.1 響應式狀態管理

在 Vue3 中，可以使用ref和reactive函數來創建響應式狀態。ref用於創建單個值的響應式引用，而reactive用於創建包含多個屬性的響應式對象。

import { ref, reactive } from 'vue'

// 創建一個響應式引用
const count = ref(0)

// 創建一個響應式對象
const state = reactive({
  message: 'Hello',
  name: 'World'
})

然後，你可以在組件中使用這些響應式狀態：

export default {
  setup() {
    // 使用響應式引用
    const counter = ref(0)
    
    // 使用響應式對象
    const data = reactive({
      message: 'Hello',
      name: 'World'
    })

    return {
      counter,
      data
    }
  }
}

註意，在使用響應式狀態時，需要使用.value來訪問ref類型的數據：

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <p>Message: {{ data.message }}</p>
    <p>Name: {{ data.name }}</p>
  </div>
</template>

<script>
export default {
  setup() {
    const counter = ref(0)
    const data = reactive({
      message: 'Hello',
      name: 'World'
    })

    return {
      counter,
      data
    }
  }
}
</script>

4.2 生命周期鉤子函數的替代方法

在 Vue3 中，生命周期鉤子函數被替換為了setup函數。你可以在setup函數中執行組件初始化的邏輯，並返回要暴露給模板的數據和方法。

export default {
  setup() {
    // 組件初始化邏輯
    
    return {
      // 要暴露給模板的數據和方法
    }
  }
}

如果需要在組件掛載後或卸載前執行一些操作，可以使用onMounted和onUnmounted鉤子函數：

import { onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      // 組件掛載後執行的操作
    })

    onUnmounted(() => {
      // 組件卸載前執行的操作
    })

    return {}
  }
}

4.3 針對特定功能的自定義組合式 API

除了使用 Vue 提供的內置組合式 API 之外，你還可以創建自己的自定義組合式 API 來封裝特定功能的邏輯。

例如，假設你想要創建一個可復用的計時器邏輯，你可以編寫一個名為"useTimer"的自定義組合式 API：

import { ref, watch, onUnmounted } from 'vue'

export function useTimer(initialValue = 0) {
  const timer = ref(initialValue)

  const startTimer = () => {
    timer.value = 0
    const interval = setInterval(() => {
      timer.value++
    }, 1000)
    onUnmounted(() => {
      clearInterval(interval)
    })
  }

  watch(timer, (newValue) => {
    console.log('Timer:', newValue)
  })

  return {
    timer,
    startTimer
  }
}

然後，在你的組件中使用自定義組合式 API：

import { useTimer } from './useTimer'

export default {
  setup() {
    const { timer, startTimer } = useTimer()

    return {
      timer,
      startTimer
    }
  }
}

這樣，你就可以在多個組件中重覆使用計時器邏輯。

4.4 使用 ref 和 reactive 進行數據響應式處理

在 Vue3 中，我們可以使用ref和reactive函數來創建響應式的引用和對象。

  • 使用ref函數創建響應式引用：
import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 輸出：0

count.value++ // 修改值
console.log(count.value) // 輸出：1
  • 使用reactive函數創建響應式對象：
import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})

console.log(state.count) // 輸出：0
console.log(state.name) // 輸出：'John'

state.count++ // 修改值
console.log(state.count) // 輸出：1

4.5 使用 watchEffect 和 watch 進行數據偵聽

Vue3 提供了watchEffect和watch函數來進行數據偵聽。

  • 使用watchEffect監聽響應式狀態的變化，並執行回調函數：
import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0
})

watchEffect(() => {
  console.log('Count changed:', state.count)
})
  • 使用watch函數監聽特定的響應式狀態，並執行回調函數：
import { watch, reactive } from 'vue'

const state = reactive({
  count: 0
})

watch(
  () => state.count,
  (newVal, oldVal) => {
    console.log('Count changed:', newVal, oldVal)
  }
)

4.6 使用 offer 和 inject 實現組件之間的通信

Vue3 中，我們可以使用provide和inject來實現組件之間的通信。

  • 在父組件中使用provide提供數據：
import { provide, reactive } from 'vue'

const state = reactive({
  count: 0
})

provide('state', state)
  • 在子組件中使用inject獲取提供的數據：
import { inject } from 'vue'

export default {
  setup() {
    const state = inject('state')
    console.log(state.count) // 輸出：0

    return {}
  }
}

通過這些技巧，你可以更好地利用 Vue3 的組合式 API 來處理數據響應性、數據偵聽以及組件之間的通信。

5 總結

Vue3 的組合式 API 和單文件組件為我們帶來了更加靈活、可維護的開發方式。通過組合式 API，我們能夠更好地組織組件的邏輯，並且可以輕鬆地復用和共用代碼邏輯。而單文件組件則將模板、樣式和邏輯集成在一個文件中，簡化了開發流程，提高了代碼的可讀性和可維護性。

在本文中，我們從頭到尾介紹瞭如何使用 Vue3 的組合式 API 和單文件組件來構建應用程式。我們學習瞭如何安裝和配置 Vue3，並且詳細講解了創建單文件組件的步驟。此外，我們還探討了一些常見的組合式 API 模式和技巧，如響應式狀態管理、替代生命周期鉤子函數的方法以及組件之間的通信。

通過深入學習和實踐這些概念和技術，你可以提升自己在 Vue 開發中的技能水平。無論你是新手還是有經驗的開發者，Vue3 的組合式 API 和單文件組件都將為你帶來更好的開發體驗和更高的效率。

在未來，Vue3 的發展還將帶來更多新的特性和功能。我們鼓勵你保持對 Vue 生態系統的關註，並繼續深入學習和探索。謝謝你閱讀本文，希望本文對你學習和實踐 Vue3 組合式 API 和單文件組件有所幫助。祝你在 Vue 開發中取得更大的成功！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 分散式可視化 DAG 任務調度系統 Taier 的整體流程分析
    Taier 作為[袋鼠雲](https://www.dtstack.com/?src=szsm)的[開源項目](https://www.dtstack.com/?src=szsm)之一，是一個[分散式可視化的 DAG 任務調度系統](https://www.dtstack.com/?src=szsm ...
  • CSS基礎-盒模型
    ##### 3 列表標簽 html中的列表標簽，該類標簽是關於HTML文檔中列表的，包含dl、dt、dd、ol、li、ul等標簽。這裡主要說的是ul和ol標簽。 （1）ol標簽代表HTML的有序列表。ol成對出現，以開始，結束。列表中的每一列使用標簽定義，這一點與無序列表相同。每列使用數字或字母開頭 ...
  • 2 超鏈接標簽
    ##### 2 超鏈接標簽 超鏈接是瀏覽者和伺服器的交互的主要手段，也叫超級鏈接或a鏈接，是網頁中指向一個目標的連接關係，這個目標可以是網頁、網頁中的具體位置、圖片、郵件地址、文件、應用程式等。 超鏈接是網頁中最重要的元素之一。一個網站的各個網頁就是通過超鏈接關聯起來的，用戶通過點擊超鏈接可以從一個 ...
  • 記錄--webpack和vite原理
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 前言 每次用vite創建項目秒建好，前幾天用vue-cli創建了一個項目，足足等了我一分鐘，那為什麼用 vite 比 webpack 要快呢，這篇文章帶你梳理清楚它們的原理及不同之處！文章有一點長，看完絕對有收穫！ 正文 一、webpac ...
  • 全選文本框示例
    ### 一、實現效果 + 點擊全選按鈕/取消全選，控制商品的全選或取消 + 每個商品的覆選框都選中後，自動勾上全選按鈕，或者商品任何一個覆選框沒有選中，取消全選 ![image](https://img2023.cnblogs.com/blog/2408012/202308/2408012-2023 ...
  • 1 基本標簽
    ```html 1基本標簽 你是風兒我是沙 你是風兒我是沙 你是風兒我是沙 你是風兒我是沙 你是風兒我是沙 你是風兒我是沙 床前明月光, 疑是地上霜. 舉頭望明月, 低頭思故鄉. 大家好，我是段落標簽p。我按了enter一下 換行了 大家好，我是段落標簽p。我按了enter一下 換行了 定義粗體文本 ...
  • 京東門詳一碼多端探索與實踐
    本文主要講述京東門詳業務在支撐過程中遇到的困境，面對問題我們在效率提升、質量保障等方向的探索和實踐，在此將實踐過程中問題解決的思路和方案與大家一起分享，也希望能給大家帶來一些新的啟發 ...
  • 一文瞭解 history 和 react-router 的實現原理
    >我們是[袋鼠雲數棧 UED 團隊](http://ued.dtstack.cn/)，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 >本文作者：[霜序](https://luckyfbb.github.io/blog) ## 前言 在[前一篇文章 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類