Vue3知識點梳理

注:純手打,如有錯誤歡迎評論區交流!
轉載請注明出處:https://blog.csdn.net/testleaf/article/details/148056625
編寫此文是為了更好地學習前端知識,如果損害了有關人的利益,請聯系刪除!
本文章將不定時更新,敬請期待!!!
歡迎點贊、收藏、轉發、關注,多謝!!!

目錄

    • 一、Vue2選項式API和Vue3組合式API
    • 二、Vue3相比于Vue2的優勢
    • 三、使用create-vue搭建Vue3項目
    • 四、組合式API - setup選項
    • 五、組合式API - reactive和ref函數
    • 六、組合式API - computed
    • 七、組合式API - watch
    • 八、組合式API - 生命周期函數

一、Vue2選項式API和Vue3組合式API

1、Vue 2 選項式 API(Options API)?

<template><div><p>{{ message }}</p><button @click="reverseMessage">Reverse</button></div>
</template><script>
export default {data() {return { message: "Hello Vue 2!" };},methods: {reverseMessage() {this.message = this.message.split('').reverse().join('');}},mounted() {console.log("Component mounted!");}
};
</script>

2、Vue 3 組合式 API(Composition API)

<template><div><p>{{ message }}</p><button @click="reverseMessage">Reverse</button></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {const message = ref("Hello Vue 3!");const reverseMessage = () => {message.value = message.value.split('').reverse().join('');};onMounted(() => {console.log("Component mounted!");});return { message, reverseMessage };}
};
</script>

3、核心對比

??對比維度????Vue 2 選項式 API????Vue 3 組合式 API??
????代碼組織方式????按選項(datamethods 等)分類??按邏輯功能聚合(setup() 函數內)
????邏輯復用????依賴 mixins(易沖突)??自定義組合函數(無沖突)
????TypeScript 支持???? 較弱(this 類型推斷困難)??優秀(ref、reactive 類型明確)
????適用場景???? 簡單組件、小型項目??復雜組件、大型項目、邏輯復用需求
????響應式系統????基于 Object.defineProperty(Vue 2)?? 基于 Proxy(Vue 3,性能更好)

二、Vue3相比于Vue2的優勢

1、更容易維護:組合式API、更好的TypeScript支持;
2、更快的速度:重寫diff算法、模板編譯優化、更高效的組件初始化;
3、更優的數據響應式:Proxy
4、更小的體積:良好的TreeShaking、按需引入;

三、使用create-vue搭建Vue3項目

1、認識create-vue
create-vue是Vue官方新的腳手架工具,底層切換到了 vite (下一代前端工具鏈),為開發提供極速響應。
vue-cli的底層是webpack
2、使用create-vue創建項目

npm init vue@latest

3、項目關鍵文件

  • vite.config.js - 項目的配置文件:基于vite的配置
  • package.json - 項目包文件:核心依賴項變成了 Vue3.xvite
  • main.js - 入口文件:createApp函數創建應用實例
  • app.vue - 根組件:SFC單文件組件 script - template - style
    • 變化一:腳本script和模板template順序調整
    • 變化二:模板template不再要求唯一根元素
    • 變化三:腳本script添加setup標識支持組合式API
  • index.html - 單頁入口:提供idapp的掛載點

四、組合式API - setup選項

1、寫法

<script>export default {setup(){},beforeCreate(){}}
</script>

2、執行時機
beforeCreate鉤子之前執行;
3、setup中寫代碼的特點
setup函數中寫的數據和方法需要在末尾以對象的方式return,才能給模版使用;
4、<script setup>語法糖
script標簽添加 setup標記,不需要再寫導出語句,默認會添加導出語句;

<script setup>const message = 'this is message'const logMessage = ()=>{console.log(message)}
</script>

五、組合式API - reactive和ref函數

1、reactive
接受對象類型數據的參數傳入并返回一個響應式的對象;

import { reactive } from 'vue'const state = reactive({count: 0,message: 'Hello Vue!'
})// 訪問和修改
state.count++
console.log(state.message)

2、ref
接收簡單類型或者對象類型的數據傳入并返回一個響應式的對象;

import { ref } from 'vue'const count = ref(0)
const message = ref('Hello Vue!')// 訪問和修改
count.value++ // 注意需要通過.value訪問
console.log(message.value)

3、比較與選擇

特性reactiveref
適用類型對象任意值
訪問方式直接訪問.value
模板中使用直接使用自動解包
解構響應性丟失保持

4、使用建議

  • 當需要管理一組相關狀態時,使用reactive
  • 當需要管理單個原始值時,使用ref
  • 在組合式函數中返回狀態時,通常使用ref以保持靈活性

六、組合式API - computed

計算屬性基本思想和Vue2保持一致,組合式API下的計算屬性只是修改了API寫法;
基本用法:

import { ref, computed } from 'vue'const count = ref(0)// 創建一個計算屬性
const doubleCount = computed(() => count.value * 2)console.log(doubleCount.value) // 0
count.value++
console.log(doubleCount.value) // 2

可寫計算屬性:

const firstName = ref('John')
const lastName = ref('Doe')const fullName = computed({get() {return `${firstName.value} ${lastName.value}`},set(newValue) {[firstName.value, lastName.value] = newValue.split(' ')}
})fullName.value = 'Jane Smith' // 會自動更新firstName和lastName

七、組合式API - watch

1、基本用法

import { ref, watch } from 'vue'const count = ref(0)// 基本watch用法
watch(count, (newValue, oldValue) => {console.log(`count從${oldValue}變為${newValue}`)
})

2、觀察多個源

const firstName = ref('')
const lastName = ref('')// 觀察多個ref
watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {console.log(`名字從${oldFirst} ${oldLast}變為${newFirst} ${newLast}`)
})

3、觀察響應式對象

const state = reactive({user: {name: 'Alice',age: 25}
})// 深度觀察對象
watch(() => state.user,(newUser, oldUser) => {console.log('用戶信息變化:', newUser)},{ deep: true }
)

4、立即執行

const data = ref(null)// 立即執行回調
watch(data,(newValue) => {console.log('數據:', newValue)},{ immediate: true }
)

5、觀察getter函數

const state = reactive({items: [],total: 0
})// 觀察計算值
watch(() => state.items.length,(newLength) => {console.log(`項目數量變為: ${newLength}`)}
)

6、停止觀察

const stop = watch(count, (newValue) => {if (newValue > 10) {stop() // 停止觀察console.log('已達到最大值,停止觀察')}
})

7、實際應用示例

<template><div><input v-model="searchQuery" placeholder="搜索..."><div v-if="isSearching">搜索中...</div><ul v-else><li v-for="result in searchResults" :key="result.id">{{ result.name }}</li></ul></div>
</template><script setup>
import { ref, watch } from 'vue'const searchQuery = ref('')
const searchResults = ref([])
const isSearching = ref(false)// 防抖搜索
watch(searchQuery, async (newQuery) => {if (!newQuery.trim()) {searchResults.value = []return}isSearching.value = truetry {// 模擬API調用await new Promise(resolve => setTimeout(resolve, 300))searchResults.value = await mockSearch(newQuery)} finally {isSearching.value = false}
})async function mockSearch(query) {// 模擬API返回return [{ id: 1, name: `${query} 結果1` },{ id: 2, name: `${query} 結果2` }]
}
</script>

8、watchEffect
與watch相關的還有watchEffect,它會立即執行一次,并自動追蹤其依賴:

import { ref, watchEffect } from 'vue'const count = ref(0)watchEffect(() => {console.log(`count的值是: ${count.value}`)
})

9、比較watch和watchEffect

特性watchwatchEffect
惰性執行否(立即執行)
指定觀察源需要自動追蹤
訪問舊值可以不可以
初始化執行需要配置immediate總是執行

10、最佳實踐

  • ??避免過度使用??:優先使用計算屬性,只在需要副作用時使用watch
  • ??清理副作用??:在回調中執行異步操作時,注意清理之前的操作;
  • ??性能優化??:對于復雜對象,考慮使用{ deep: true }或特定getter函數;
  • ??組件卸載時??:在setup()中創建的watch會自動停止,手動創建的記得清理;

八、組合式API - 生命周期函數

在Vue 3的組合式API中,生命周期鉤子是通過特定的函數來訪問的,而不是Options API中的選項形式。
1、主要生命周期函數
onBeforeMount 和 onMounted:

import { onBeforeMount, onMounted } from 'vue'onBeforeMount(() => {console.log('組件即將掛載')
})onMounted(() => {console.log('組件已掛載')// 可以訪問DOM元素
})

onBeforeUpdate 和 onUpdated:

import { onBeforeUpdate, onUpdated } from 'vue'onBeforeUpdate(() => {console.log('組件即將更新')
})onUpdated(() => {console.log('組件已更新')// DOM已更新完成
})

onBeforeUnmount 和 onUnmounted:

import { onBeforeUnmount, onUnmounted } from 'vue'onBeforeUnmount(() => {console.log('組件即將卸載')
})onUnmounted(() => {console.log('組件已卸載')// 清理定時器、事件監聽等
})

onErrorCaptured:

import { onErrorCaptured } from 'vue'onErrorCaptured((err, instance, info) => {console.error('捕獲到錯誤:', err)// 返回false阻止錯誤繼續向上傳播return false
})

2、新增的生命周期函數
Vue 3還引入了兩個新的生命周期函數:
onRenderTracked (開發模式):

import { onRenderTracked } from 'vue'onRenderTracked((event) => {console.log('跟蹤到依賴:', event)
})

onRenderTriggered (開發模式):

import { onRenderTriggered } from 'vue'onRenderTriggered((event) => {console.log('觸發重新渲染:', event)
})

3、組合式API與Options API生命周期對應關系

組合式APIOptions API
onBeforeMountbeforeMount
onMountedmounted
onBeforeUpdatebeforeUpdate
onUpdatedupdated
onBeforeUnmountbeforeUnmount
onUnmountedunmounted
onErrorCapturederrorCaptured
onActivatedactivated
onDeactivateddeactivated

4、實際應用示例

<template><div><h2>生命周期示例</h2><p>計數: {{ count }}</p><button @click="count++">增加</button></div>
</template><script setup>
import { ref, onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted
} from 'vue'const count = ref(0)onBeforeMount(() => {console.log('1. 組件即將掛載 - count:', count.value)
})onMounted(() => {console.log('2. 組件已掛載 - 可以訪問DOM')// 這里可以執行需要DOM的操作
})onBeforeUpdate(() => {console.log('3. 組件即將更新 - 舊count:', count.value)
})onUpdated(() => {console.log('4. 組件已更新 - 新count:', count.value)
})onBeforeUnmount(() => {console.log('5. 組件即將卸載')
})onUnmounted(() => {console.log('6. 組件已卸載')// 清理工作
})
</script>

5、最佳實踐

  • ??邏輯組織??:將相關生命周期邏輯放在一起,保持代碼可讀性;
  • ??清理工作??:在onUnmounted中清理定時器、事件監聽等資源;
  • ??避免濫用??:不是所有邏輯都需要放在生命周期中,有些可以放在方法中按需調用;
  • ??異步操作??:在onMounted中進行DOM操作或數據獲取;
  • 性能優化??:使用onRenderTracked和onRenderTriggered調試性能問題;

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

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

相關文章

C++23 新增的查找算法詳解:ranges::find_last 系列函數

文章目錄 引言C Ranges 庫簡介ranges::find_last、ranges::find_last_if 和 ranges::find_last_if_not 概述ranges::find_last示例代碼代碼解釋 ranges::find_last_if函數簽名參數解釋示例代碼代碼解釋 ranges::find_last_if_not示例代碼代碼解釋 使用場景總結 引言 在 C 的發…

DW_DMAC簡介

基本概念&#xff1a; DMA&#xff1a;全稱direct memory access&#xff0c;即直接存儲器訪問。dma可以在中央處理器CPU不參與的情況下&#xff0c;實現外設和內存之間的數據直接傳輸&#xff0c;從而提高數據傳輸效率 外設與計算機內存之間的數據傳輸&#xff0c;一般可通過…

信號量基礎入門:并發控制的核心概念

問題的復雜性產生的根本原因在于&#xff0c;如 2.2 節所述&#xff0c;共享變量的訪問始終是“單向信息流”。也就是說&#xff0c;一個進程可以分配新值或檢查當前值&#xff0c;但這種檢查不會為其他進程留下任何痕跡。結果是&#xff0c;當一個進程想要對共享變量的當前值作…

(十九)Java集合框架深度解析:從基礎到高級應用

一、集合框架概述 1.1 什么是集合框架 Java集合框架(Java Collections Framework, JCF)是Java語言中用于表示和操作集合的一套標準化體系結構。它提供了一組接口、實現類和算法&#xff0c;用于存儲和操作對象組&#xff0c;解決了數組在存儲對象時的諸多限制。 集合框架的主…

Blender cycles烘焙貼圖筆記

下載了一些槍模型&#xff0c;一個模型有七八個材質&#xff0c;一個扳機、準星還有單獨的材質&#xff0c;用的貼圖只有一小部分有內容&#xff0c;對Draw Call非常不友好。不得不學一下怎么用Blender減材質。 找到了這個視頻如何在Blender中將多種材料多張貼圖烘焙成一張貼圖…

mysql的高可用

1. 環境準備 2臺MySQL服務器&#xff08;node1: 192.168.1.101&#xff0c;node2: 192.168.1.102&#xff09;2臺HAProxy Keepalived服務器&#xff08;haproxy1: 192.168.1.103&#xff0c;haproxy2: 192.168.1.104&#xff09;虛擬IP&#xff08;VIP: 192.168.1.100&#x…

鴻蒙 系統-安全-程序訪問控制-應用權限管控

Ability Kit 提供了一種允許應用訪問系統資源&#xff08;如&#xff1a;通訊錄等&#xff09;和系統能力&#xff08;如&#xff1a;訪問攝像頭、麥克風等&#xff09;的通用權限訪問方式&#xff0c;來保護系統數據&#xff08;包括用戶個人數據&#xff09;或功能&#xff0…

算法-數對的使用

1、數對可用于數組排序中&#xff0c;并且可記憶化排序前的元素下標 #include<iostream> #include<string> #include<bits/stdc.h> using namespace std; typedef long long ll; const int N 2e5 10; pair<int, int> a[N]; void solve() {ll n;cin …

Linux基礎第四天

系統之間文件共享 想要實現兩個不同的系統之間實現文件共享&#xff0c;最簡單的一種方案就是設置VMware軟件的共享文件夾&#xff0c;利用共享文件夾可以實現linux系統和windows系統之間的文件共享&#xff0c;這樣就可以實現在windows系統上編輯程序&#xff0c;然后在linux系…

Docker 核心原理詳解:Namespaces 與 Cgroups 如何實現資源隔離與限制

#Docker疑難雜癥解決指南# Docker 作為容器化技術的代名詞,徹底改變了軟件的開發、部署和管理方式。它憑借其輕量、快速、一致性強的特性,成為了現代云原生架構的基石。然而,Docker 容器的神奇之處并非“無中生有”,其背后是 Linux 內核的兩大核心技術——Namespaces(命名…

GitHub 趨勢日報 (2025年05月14日)

本日報由 TrendForge 系統生成 https://trendforge.devlive.org/ &#x1f310; 本日報中的項目描述已自動翻譯為中文 &#x1f4c8; 今日整體趨勢 Top 10 排名項目名稱項目描述今日獲星總星數語言1xming521/WeClone&#x1f680;從聊天記錄創造數字分身的一站式解決方案&…

【Go】從0開始學習Go

文章目錄 從0開始學習Go0 與C對比1 代碼框架1.1 helloworld式代碼示例1.2 主體代碼元素&#xff08;核心三部分&#xff09;1.3 其他 2 與C/C區別3 有用的小工具4 注意事項 從0開始學習Go 0 與C對比 特性CGo編譯型語言需要編譯為機器碼直接編譯為二進制可執行文件靜態類型類型…

簡單說一下 Webpack分包

最近在看有關webpack分包的知識&#xff0c;搜索了很多資料&#xff0c;感覺這一塊很是迷惑&#xff0c;網上的資料講的也迷迷糊糊&#xff0c;這里簡單總結分享一下&#xff0c;也當個筆記。 如有錯誤請指出。 為什么需要分包 我們知道&#xff0c;webpack的作用&#xff0c…

使用Python和FastAPI構建網站爬蟲:Oncolo醫療文章抓取實戰

使用Python和FastAPI構建網站爬蟲&#xff1a;Oncolo醫療文章抓取實戰 前言項目概述技術棧代碼分析1. 導入必要的庫2. 初始化FastAPI應用3. 定義請求模型4. 核心爬蟲功能4.1 URL驗證和準備4.2 設置HTTP請求4.3 發送請求和解析HTML4.4 提取文章內容4.5 保存結果和返回數據 5. AP…

YoloV8改進策略:卷積篇|風車卷積|即插即用

文章目錄 論文信息論文翻譯摘要引言相關研究紅外搜索與跟蹤檢測和分割網絡紅外搜索與跟蹤數據集的損失函數紅外搜索與跟蹤數據集方法風車形卷積(PConv)基于尺度的動態損失SIRST - UAVB數據集實驗實驗設置與其他方法的比較多模型上的消融實驗結論致謝代碼改進方法測試結果總結…

【NLP】36. 從指令微調到人類偏好:構建更有用的大語言模型

從指令微調到人類偏好&#xff1a;構建更有用的大語言模型 大語言模型&#xff08;LLMs&#xff09;已經成為現代自然語言處理系統的核心&#xff0c;但單純依賴傳統語言建模目標&#xff0c;往往難以滿足實際應用的“人類意圖”。從 Instruction Tuning&#xff08;指令微調&…

基于Transformers與深度學習的微博評論情感分析及AI自動回復系統

前言 這個項目存在cookie沒有自動更新問題&#xff0c;后續可能會發出來解決教程&#xff0c;還有微博網頁版的話最多看到300條評論&#xff0c;而且回復別人信息的話最多回復15條就要休息5分鐘左右才能評論 1. 項目概述 本項目實現了一個微博評論自動化處理系統&#xff0c…

詳解 Zephyr RTOS:架構、功能與開發指南

目錄 Zephyr RTOS 的核心特性 1. 輕量級和可擴展性 2. 實時性能 3. 多平臺支持 4. 安全性 5. 社區和生態系統 Zephyr 的架構 1. 內核 2. 驅動模型 3. 網絡棧 4. 文件系統 開發環境和工具鏈 安裝和配置 開發流程 1. 應用程序開發 2. 調試和測試 3. 部署 實際應…

人工智能重塑醫療健康:從輔助診斷到個性化治療的全方位變革

人工智能正在以前所未有的速度改變著醫療健康領域&#xff0c;從影像診斷到藥物研發&#xff0c;從醫院管理到遠程醫療&#xff0c;AI 技術已滲透到醫療服務的各個環節。本文將深入探討人工智能如何賦能醫療健康產業&#xff0c;分析其在醫學影像、臨床決策、藥物研發、個性化醫…

Linux筆記---內核態與用戶態

用戶態&#xff08;User Mode&#xff09; 權限級別&#xff1a;較低&#xff0c;限制應用程序直接訪問硬件或關鍵系統資源。 適用場景&#xff1a;普通應用程序的運行環境。 限制&#xff1a;無法執行特權指令&#xff08;如操作I/O端口、修改內存管理單元配置等&#xff09…