Vue3 Composition API與十大組件開發案例詳解

在這里插入圖片描述

文章目錄

    • 一、Vue3核心API解析
      • 1.1 Composition API優勢
      • 1.2 核心API
    • 二、十大組件開發案例
      • 案例1:響應式表單組件
      • 案例2:動態模態框(Teleport應用)
      • 案例3:可復用列表組件
      • 案例4:全局狀態通知組件
      • 案例5:圖片懶加載組件
      • 案例6:異步數據加載組件
      • 案例7:可拖拽排序列表
      • 案例8:路由守衛高階組件
      • 案例9:主題切換Provider
      • 案例10:可視化表單生成器
    • 三、組件開發最佳實踐
    • 四、總結

一、Vue3核心API解析

1.1 Composition API優勢

  • 邏輯復用能力提升
  • 更好的TypeScript支持
  • 代碼組織更靈活

1.2 核心API

  • ref/reactive:響應式數據
  • computed/watch:計算與監聽
  • provide/inject:跨組件通信
  • defineProps/defineEmits:Props/事件聲明

二、十大組件開發案例

案例1:響應式表單組件

<template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template><script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

實現要點:v-model雙向綁定原理


案例2:動態模態框(Teleport應用)

<template><button @click="showModal = true">打開彈窗</button><Teleport to="body"><div v-if="showModal" class="modal"><slot /><button @click="showModal = false">關閉</button></div></Teleport>
</template><script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

關鍵技術:Teleport傳送門


案例3:可復用列表組件

<template><ul><li v-for="(item, index) in items" :key="index"><slot :item="item" :index="index"></slot></li></ul>
</template><script setup>
defineProps({items: Array
})
</script>

核心思想:作用域插槽應用


案例4:全局狀態通知組件

// useNotifications.js
import { reactive } from 'vue'export const notifications = reactive([])export function useNotify() {return {add: (msg) => notifications.push({ id: Date.now(), msg }),remove: (id) => {const index = notifications.findIndex(n => n.id === id)notifications.splice(index, 1)}}
}

實現模式:全局狀態管理


案例5:圖片懶加載組件

<template><img v-lazy="src">
</template><script setup>
import { useIntersectionObserver } from '@vueuse/core'const vLazy = {mounted(el, binding) {useIntersectionObserver(el, ([{ isIntersecting }]) => {if (isIntersecting) {el.src = binding.value}})}
}
</script>

關鍵技術:自定義指令 + Intersection Observer


案例6:異步數據加載組件

<script setup>
import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() =>import('./components/AsyncComponent.vue')
)
</script>

最佳實踐:代碼分割與懶加載


案例7:可拖拽排序列表

<template><ul><li v-for="(item, index) in items":key="item.id"@dragstart="dragStart(index)"@dragover.prevent="dragOver(index)"draggable="true">{{ item.text }}</li></ul>
</template><script setup>
// 實現拖動排序邏輯...
</script>

交互核心:HTML5 Drag API


案例8:路由守衛高階組件

export default {setup() {const route = useRoute()onBeforeRouteLeave((to, from, next) => {if (hasChanges.value) {confirm('確定離開?') ? next() : next(false)} else {next()}})}
}

安全策略:路由導航守衛


案例9:主題切換Provider

<!-- ThemeProvider.vue -->
<script setup>
import { provide, ref } from 'vue'const theme = ref('light')
provide('theme', {theme,toggle: () => theme.value = theme.value === 'light' ? 'dark' : 'light'
})
</script>

跨組件方案:provide/inject模式


案例10:可視化表單生成器

<template><component v-for="field in schema":is="field.component"v-bind="field.props"v-model="formData[field.model]"/>
</template>

動態方案:動態組件與Schema驅動


三、組件開發最佳實踐

  1. 遵循單一職責原則
  2. 合理使用插槽機制
  3. 優先使用Composition API
  4. 做好TypeScript類型定義
  5. 性能優化策略(Memoization、虛擬滾動等)

四、總結

通過以上10個典型案例的深入實踐,我們全面體驗了Vue3核心API在真實組件開發場景中的卓越表現。Vue3的Composition API憑借其創新的函數式編程理念,為組件開發注入了前所未有的靈活性和代碼組織能力。這一API打破了傳統Options API的限制,使得開發者能夠更自由地組合和復用邏輯,從而構建出更加清晰、易于維護的組件結構。

在實踐中,我們深刻感受到Composition API與TypeScript的完美結合為開發過程帶來的巨大優勢。TypeScript的強類型特性不僅提升了代碼的可讀性,還在編譯階段就捕捉到了許多潛在的錯誤,大大降低了運行時出錯的概率。這種靜態類型檢查與Vue3的動態響應式系統的結合,使得我們的代碼既具有高度的靈活性,又保持了極高的穩定性和可靠性。

此外,通過這10個案例的開發,我們還發現Vue3的Composition API在復雜組件和大型應用中表現尤為出色。它允許我們將組件邏輯拆分為多個獨立的函數,每個函數都專注于處理特定的任務,從而降低了組件的耦合度,提高了代碼的可維護性。這種模塊化的開發方式不僅提升了開發效率,還為未來的功能擴展和代碼重構奠定了堅實的基礎。

綜上所述,Vue3的Composition API結合TypeScript為組件開發帶來了一場革命性的變革。它不僅提升了代碼的質量和可維護性,還為開發者提供了更加靈活、高效的開發工具。我們相信,在未來的前端開發中,Vue3的Composition API將成為越來越多開發者的首選。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/78133.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/78133.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/78133.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Kafka 詳細解讀

1. Producer&#xff08;生產部卷王&#xff09; 職責&#xff1a;往 Kafka 里瘋狂輸出數據&#xff0c;KPI 是「日拋式消息海嘯」 職場人設&#xff1a; 白天開會畫餅&#xff0c;深夜寫周報的奮斗逼&#xff0c;口頭禪是「這個需求今晚必須上線&#xff01;」代碼里的「福報…

LicheeRV Nano 與Ubuntu官方risc-v 鏡像混合

LicheeRV Nano 官方給的鏡像并沒有unbutu, unbutu官方有一個基于 LicheeRV Dock的鏡像&#xff0c;想象能否將二者混合 &#xff08;1&#xff09;刷 LicheeRV Dock的鏡像 nano無法啟動 &#xff08;2&#xff09;將nano的boot分區替換掉 LicheeRV Dock的rootfs以外的分區也…

【模板匹配】圖像處理(OpenCV)-part10

19.1模板匹配 模板匹配就是用模板圖&#xff08;通常是一個小圖&#xff09;在目標圖像&#xff08;通常是一個比模板圖大的圖片&#xff09;中不斷的滑動比較&#xff0c;通過某種比較方法來判斷是否匹配成功,找到模板圖所在的位置。 不會有邊緣填充。 類似于卷積&#xff0c…

HTML:表格數據展示區

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>人員信息表</title><link rel"styl…

MySQL 的鎖,表級鎖是哪一層的鎖?行鎖是哪一層的鎖?

MySQL 的鎖層級與類型 在 MySQL 中&#xff0c;鎖的層級和實現與存儲引擎密切相關。 1. 表級鎖&#xff08;Table-Level Locks&#xff09; &#xff08;1&#xff09;存儲引擎層的表級鎖 實現層級&#xff1a;存儲引擎層&#xff08;如 MyISAM、InnoDB&#xff09;。特點&a…

阿里巴巴按圖搜索1688商品(拍立淘) API 返回值說明

阿里巴巴按圖搜索1688商品&#xff08;拍立淘&#xff09;API 返回值說明 阿里巴巴按圖搜索1688商品&#xff08;拍立淘&#xff09;API 的返回值通常以 JSON 格式返回&#xff0c;包含搜索結果、商品信息、分頁信息等。以下是具體的返回值說明&#xff1a; 1. 請求狀態信息 …

基于esp32-s3,寫一個實現json鍵值對數據創建和讀寫解析c例程

以下是一個基于 ESP32 - S3 使用 ESP - IDF 框架實現 JSON 鍵值對數據創建、讀寫和解析的 C 語言例程。 環境準備 確保你已經安裝了 ESP - IDF 開發環境&#xff0c;并且可以正常編譯和燒錄代碼到 ESP32 - S3 開發板。 代碼示例 #include <stdio.h> #include <stri…

MyBatis-Plus 使用 Wrapper 構建動態 SQL 有哪些優劣勢?

MyBatis-Plus (MP) 提供的 Wrapper (如 QueryWrapper, LambdaQueryWrapper, UpdateWrapper, LambdaUpdateWrapper) 是其核心特性之一&#xff0c;它允許我們在開發時以面向對象的方式構建 SQL 的 WHERE 條件、ORDER BY、SELECT 字段列表等部分。與傳統的 MyBatis 在 XML 文件中…

STM32與i.MX6ULL內存與存儲機制全解析:從微控制器到應用處理器的設計差異

最近做FreeRTos&#xff0c;以及前面設計的RVOS&#xff0c;這種RTOS級別的系統內存上的分布與CortexA系列里面的分布有相當大的區別&#xff0c;給我搞糊涂了。 目錄 STM32&#xff08;Cortex-M系列&#xff09;的內存與存儲機制 Flash存儲內容RAM存儲內容啟動與運行時流程示例…

Eteam 0.3版本開發規劃

Eteam 0.1系列經歷了3個小版本&#xff0c;主要完成了團隊資料庫功能。 Eteam 0.2系列經歷了22個小版本&#xff0c;主要完成了白板和AI交互的能力。 目前的問題 目前白板上的數據有兩個來源&#xff0c;團隊資料庫和外部數據。外部數據和團隊資料庫數據邊界不是很清晰。 0.3版…

HTML5好看的水果蔬菜在線商城網站源碼系列模板5

文章目錄 1.設計來源1.1 主界面1.2 關于我們1.3 商品服務1.4 果蔬展示1.5 聯系我們1.6 商品具體信息1.7 登錄注冊 2.效果和源碼2.1 動態效果2.2 源代碼 源碼下載萬套模板&#xff0c;程序開發&#xff0c;在線開發&#xff0c;在線溝通 作者&#xff1a;xcLeigh 文章地址&#…

深入理解Java包裝類:自動裝箱拆箱與緩存池機制

深入理解Java包裝類&#xff1a;自動裝箱拆箱與緩存池機制 對象包裝器 Java中的數據類型可以分為兩類&#xff1a;基本類型和引用類型。作為一門面向對象編程語言&#xff0c; 一切皆對象是Java語言的設計理念之一。但基本類型不是對象&#xff0c;無法直接參與面向對象操作&…

uniapp自定義拖拽排列

uniapp自定義拖拽排列并改變下標 <!-- 頁面模板 --> <template><view class"container"><view v-for"(item, index) in list" :key"item.id" class"drag-item" :style"{transform: translate(${activeInde…

基于SpringBoot的課程管理系統

前言 今天給大家分享一個基于SpringBoot的課程管理系統。 1 系統介紹 課程管理系統是一種專門為學校設計的軟件系統&#xff0c;旨在幫助學校高效地管理和組織各類課程信息。 該系統通常包括學生、教師和管理員三大角色。 他們可以通過系統進行選課、查看課程表、考試、進…

max31865典型電路

PT100讀取有很多種方案&#xff0c;常用的惠斯通電橋&#xff0c;和專用IC max31865 。 電阻溫度檢測器(RTD)是一種阻值隨溫度變化的電阻。鉑是最常見、精度最高的測溫金屬絲材料。鉑RTD稱為PT-RTD&#xff0c;鎳、銅和其它金屬亦可用來制造RTD。RTD具有較寬的測溫范圍&#x…

飛算 JavaAI 與 Spring Boot:如何實現微服務開發效率翻倍?

微服務架構憑借其高內聚、低耦合的特性&#xff0c;成為企業構建復雜應用系統的首選方案。然而&#xff0c;傳統微服務開發流程中&#xff0c;從服務拆分、接口設計到代碼編寫、調試部署&#xff0c;往往需要耗費大量時間與人力成本。Spring Boot 作為 Java 領域最受歡迎的微服…

(2)Docker 常用命令

文章目錄 Docker 服務器Docker 鏡像Docker 容器本地 RegistryRUN vs CMD vs ENTRYPOINTRUNCMDENTRYPOINT 限制容器對內存、CPU 和 IO 資源的使用內存CPUBlock IO設置權重bps 和 iops cgroup 和 namespacecgroupnamespacMount namespaceUTS namespaceIPC namespacePID namespace…

Django 實現電影推薦系統:從搭建到功能完善(附源碼)

前言&#xff1a;本文將詳細介紹如何使用 Django 構建一個電影推薦系統&#xff0c;涵蓋項目的搭建、數據庫設計、視圖函數編寫、模板渲染以及用戶認證等多個方面。&#x1f517;軟件安裝、環境準備 ? 【作者主頁—&#x1f4da;閱讀更多優質文章、獲取更多優質源碼】 目錄 一…

C#進階學習(七)常見的泛型數據結構類(2)HashSet和SortedSet

目錄 using System.Collections.Generic; // 核心命名空間 一、 HashSet 核心特性 常用方法 屬性 二、SortedSet 核心特性 1、整型&#xff08;int、long 等&#xff09; 2、字符串型&#xff08;string&#xff09; 3、字符型&#xff08;char&#xff09; 4、自定義…

SQL之DML(查詢語句:select、where)

&#x1f3af; 本文專欄&#xff1a;MySQL深入淺出 &#x1f680; 作者主頁&#xff1a;小度愛學習 select查詢語句 在開發中&#xff0c;查詢語句是使用最多&#xff0c;也是CRUD中&#xff0c;復雜度最高的sql語句。 查詢的語法結構 select *|字段1 [, 字段2 ……] from 表…