Vue3使用Composition API實現響應式

title: Vue3使用Composition API實現響應式
date: 2024/5/29 下午8:10:24
updated: 2024/5/29 下午8:10:24
categories:

  • 前端開發

tags:

  • Vue3
  • Composition
  • Refs
  • Reactive
  • Watch
  • Lifecycle
  • Debugging

在這里插入圖片描述

1. 介紹

Composition API是Vue.js 3中新增的一組API，用于在組件中組合邏輯和功能。它可以讓你更好地組織和重用代碼，使組件更易于理解和維護。在使用Composition
API時，你可以使用<script setup>語法或setup()函數，兩種方式都可以使用Composition API中的響應式API、生命周期鉤子、模板引用和自定義渲染函數等特性。

2. 基本響應式

在Vue.js 3中，Composition API提供了幾種創建響應式數據的方法，包括ref、reactive、readonly、shallowReactive
和shallowReadonly。

2.1 ref

ref函數用于創建一個響應式的ref對象，其值可以通過.value
屬性獲取或設置。當ref對象的值發生變化時，Vue.js會自動更新視圖。AD：首頁 | 一個覆蓋廣泛主題工具的高效在線平臺

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script setup>
import { ref } from 'vue';const count = ref(0);function increment() {count.value++;
}
</script>

2.2 reactive

reactive函數用于創建一個響應式的對象，其所有屬性都是響應式的。當對象的屬性發生變化時，Vue.js會自動更新視圖。

<template><div><p>name: {{ user.name }}</p><p>age: {{ user.age }}</p><button @click="incrementAge">+1</button></div>
</template><script setup>
import { reactive } from 'vue';const user = reactive({name: 'Alice',age: 20
});function incrementAge() {user.age++;
}
</script>

2.3 readonly

readonly函數用于創建一個只讀的響應式對象，其所有屬性都是只讀的。當試圖修改只讀對象的屬性時，會拋出一個錯誤。

<template><div><p>name: {{ user.name }}</p><p>age: {{ user.age }}</p></div>
</template><script setup>
import { reactive, readonly } from 'vue';const user = reactive({name: 'Alice',age: 20
});const readonlyUser = readonly(user);// 會拋出一個錯誤
readonlyUser.age = 21;
</script>

2.4 shallowReactive

shallowReactive函數用于創建一個淺響應式的對象，其所有屬性都是響應式的，但其子對象的屬性不是響應式的。
AD：專業搜索引擎

<template><div><p>name: {{ user.name }}</p><p>age: {{ user.age }}</p><p>address: {{ user.address }}</p><button @click="incrementAge">+1</button><button @click="changeAddress">改變地址</button></div>
</template><script setup>
import { shallowReactive } from 'vue';const user = shallowReactive({name: 'Alice',age: 20,address: {province: 'Beijing',city: 'Beijing'}
});function incrementAge() {user.age++;
}function changeAddress() {user.address = {province: 'Shanghai',city: 'Shanghai'};
}
</script>

2.5 shallowReadonly

shallowReadonly函數用于創建一個淺只讀的響應式對象，其所有屬性都是只讀的，但其子對象的屬性不是只讀的。

<template><div><p>name: {{ user.name }}</p><p>age: {{ user.age }}</p><p>address: {{ user.address }}</p><!-- 會拋出一個錯誤 --><button @click="changeAddress">改變地址</button></div>
</template><script setup>
import { shallowReactive, shallowReadonly } from 'vue';const user = shallowReactive({name: 'Alice',age: 20,address: {province: 'Beijing',city: 'Beijing'}
});const readonlyUser = shallowReadonly(user);// 會拋出一個錯誤
readonlyUser.age = 21;
</script>

3. 響應式API

Composition API提供了幾種響應式API，包括watchEffect、watch、computed和provide/inject。

3.1 watchEffect

watchEffect函數用于創建一個響應式的副作用函數，當響應式數據發生變化時，副作用函數會自動重新執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script setup>
import { ref, watchEffect } from 'vue';const count = ref(0);watchEffect(() => {console.log(`count is ${count.value}`);
});function increment() {count.value++;
}
</script>

3.2 watch

watch函數用于創建一個響應式的監聽器，當響應式數據發生變化時，監聽器會自動執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script setup>
import { ref, watch } from 'vue';const count = ref(0);watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);
});function increment() {count.value++;
}
</script>

3.3 computed

computed函數用于創建一個響應式的計算屬性，其值是根據響應式數據計算得出的。當響應式數據發生變化時，計算屬性會自動重新計算。
AD：漫畫首頁

<template><div><p>count: {{ count }}</p><p>doubleCount: {{ doubleCount }}</p><button @click="increment">+1</button></div>
</template><script setup>
import { ref, computed } from 'vue';const count = ref(0);const doubleCount = computed(() => {return count.value * 2;
});function increment() {count.value++;
}
</script>

3.4 provide/inject

provide和inject函數用于在組件樹中傳遞數據。provide函數用于在父組件中提供數據，inject函數用于在子組件中注入數據。

<template><div><ChildComponent /></div>
</template><script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';provide('message', 'Hello, world!');
</script>

<template><div><p>{{ message }}</p></div>
</template><script setup>
import { inject } from 'vue';const message = inject('message');
</script>

4. 生命周期鉤子

Composition
API提供了幾種生命周期鉤子，包括setup()、onBeforeMount()、onMounted()、onBeforeUpdate()、onUpdated()、onBeforeUnmount()、onUnmounted()、onErrorCaptured()、onRenderTracked()
和onRenderTriggered()。

4.1 setup()

setup()函數是Composition API的入口點，用于在組件創建之前執行一些初始化操作。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}return {count,increment};}
};
</script>

4.2 onBeforeMount()

onBeforeMount()函數在組件掛載之前執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onBeforeMount(() => {console.log('before mount');});return {count,increment};}
};
</script>

4.3 onMounted()

onMounted()函數在組件掛載之后執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onMounted(() => {console.log('mounted');});return {count,increment};}
};
</script>

4.4 onBeforeUpdate()

onBeforeUpdate()函數在組件更新之前執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onBeforeUpdate(() => {console.log('before update');});return {count,increment};}
};
</script>

4.5 onUpdated()

onUpdated()函數在組件更新之后執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onUpdated(() => {console.log('updated');});return {count,increment};}
};
</script>

4.6 onBeforeUnmount()

onBeforeUnmount()函數在組件卸載之前執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onBeforeUnmount(() => {console.log('before unmount');});return {count,increment};}
};
</script>

4.7 onUnmounted()

onUnmounted()函數在組件卸載之后執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onUnmounted(() => {console.log('unmounted');});return {count,increment};}
};
</script>

4.8 onErrorCaptured()

onErrorCaptured()函數在組件捕獲到錯誤時執行。

<template><div><p>count: {{ count }}</p><button @click="increment">+1</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);function increment() {count.value++;}onErrorCaptured((error, instance, info) => {console.error(error);return false;});return {count,increment};}
};
</script>

4.9 onRenderTracked 和 onRenderTriggered

onRenderTracked和onRenderTriggered是兩個生命周期鉤子，它們與Vue的響應式系統和編譯器有關。這兩個鉤子是在Vue
3.x版本中引入的，主要用于調試目的，幫助開發者了解組件渲染過程中的跟蹤和觸發情況。

  1. onRenderTracked鉤子：

    • 當組件的響應式依賴項被追蹤時，即響應式系統開始跟蹤一個依賴項時，這個鉤子會被調用。
    • 它主要用于調試，可以幫助開發者了解何時響應式系統開始關注某個依賴項。
    • onRenderTracked鉤子接收兩個參數：dep和context。dep是依賴項對象，context是當前組件的上下文對象。

  2. onRenderTriggered鉤子：

    • 當組件的響應式依賴項被觸發時，即響應式系統因為某個依賴項的變化而觸發了重新渲染時，這個鉤子會被調用。
    • 它主要用于調試，可以幫助開發者了解何時響應式系統因為某個依賴項的變化而重新渲染組件。
    • onRenderTriggered鉤子也接收兩個參數：dep和context，含義與onRenderTracked相同。

示例代碼：

export default {setup() {// 定義一個響應式數據const count = ref(0);// 監聽 count 的變化watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});// 使用 onRenderTracked 和 onRenderTriggered 進行調試onRenderTracked((dep, context) => {console.log(`onRenderTracked: ${dep}`);});onRenderTriggered((dep, context) => {console.log(`onRenderTriggered: ${dep}`);});return {count};}
};

在這個示例中，我們定義了一個響應式數據count，并使用了watch來監聽它的變化。同時，我們使用了onRenderTracked
和onRenderTriggered來打印調試信息。當響應式系統開始跟蹤或觸發重新渲染時，我們會得到相應的提示。這些鉤子可以幫助開發者更好地理解Vue組件的渲染過程和響應式系統的運作。

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

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

相關文章

SQL 語言：嵌入式 SQL 和動態 SQL

SQL 語言：嵌入式 SQL 和動態 SQL

文章目錄 基本概述嵌入式 SQL動態 SQL總結 基本概述 嵌入式SQL和動態SQL是兩種在應用程序中嵌入和使用SQL語句的方法。它們都允許開發人員在編程語言中編寫SQL語句&#xff0c;以便在應用程序中執行數據庫操作。然而&#xff0c;這兩種方法在實現方式、性能和靈活性方面存在一…
閱讀更多...
Java數據結構與算法(紅黑樹)

Java數據結構與算法(紅黑樹)

前言 紅黑樹是一種自平衡二叉搜索樹&#xff0c;確保在插入和刪除操作后&#xff0c;樹的高度保持平衡&#xff0c;從而保證基本操作&#xff08;插入、刪除、查找&#xff09;的時間復雜度為O(log n)。 實現原理 紅黑樹具有以下性質&#xff1a; 每個節點要么是紅色&#…
閱讀更多...
go語言學習之旅之Go結構體

go語言學習之旅之Go結構體

在Go語言中&#xff0c;結構體&#xff08;struct&#xff09;是一種用戶定義的數據類型&#xff0c;用于組合不同類型的數據項。結構體可以包含其他結構體或基本數據類型的字段。以下是關于Go語言結構體的基本知識&#xff1a; 定義結構體&#xff1a; package mainimport &…
閱讀更多...
Python 之微信指數小程序數據抓取

Python 之微信指數小程序數據抓取

Fiddler安裝和設置 安裝 Fiddler 安裝包可以從這里獲取&#xff0c;如果失效了可以自己網上找一個安裝。 鏈接&#xff1a;https://pan.baidu.com/s/1N30BoDWm2_dBL8i8GRzK5g?pwd1znv 提取碼&#xff1a;1znv 然后就是點擊安裝就好了&#xff0c;沒什么好多說的。 啟用…
閱讀更多...
刷代碼隨想錄有感（83）：貪心算法——最大子數組和

刷代碼隨想錄有感（83）：貪心算法——最大子數組和

題干&#xff1a; 代碼&#xff1a; class Solution { public:int maxSubArray(vector<int>& nums) {int res INT_MIN;int count 0;for(int i 0; i < nums.size(); i){count nums[i];if(count > res) res count;if(count < 0)count 0;}return res;} …
閱讀更多...
【創作活動】探索 GPT-4o：下一代語言模型的技術革命

【創作活動】探索 GPT-4o：下一代語言模型的技術革命

&#x1f604; 19年之后由于某些原因斷更了三年&#xff0c;23年重新揚帆起航&#xff0c;推出更多優質博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有堅忍不拔之志 &#x1f390; 個人CSND主頁——Mi…
閱讀更多...
HTTP報文

HTTP報文

HTTP報文 報文流 HTTP報文是在HTTP引用程序之間發送的數據塊&#xff0c;這些數據塊以一種文本形式的元信息開頭&#xff0c;這些信息描述了報文的內容和含義&#xff0c;后面跟著可選的數據部分&#xff0c;這些報文在客戶端&#xff0c;服務器和代理之間流動。 報文流入源…
閱讀更多...
git更改本地項目關聯到新倉庫

git更改本地項目關聯到新倉庫

刪除現在遠程關聯的倉庫 git remote rm origin鏈接新倉庫 git remote add origin url(需要關聯的新倉庫地址)代碼提交到遠程倉庫master分支 git push --set-upstream origin master本地分支更新同步至遠程倉庫 比如本地有dev分支 git push origin dev:dev
閱讀更多...
前端項目開發，3個HTTP請求工具

前端項目開發，3個HTTP請求工具

這一小節&#xff0c;我們介紹一下前端項目開發中&#xff0c;HTTP請求會用到的3個工具&#xff0c;分別是fetch、axios和js-tool-big-box中的jsonp請求。那么他們都有哪些小區別呢&#xff1f;我們一起來看一下。 目錄 1 fetch 2 axios 3 js-tool-big-box 的 jsonp 請求 …
閱讀更多...
拷貝構造、移動構造、拷貝賦值、移動賦值

拷貝構造、移動構造、拷貝賦值、移動賦值

最近在學習C的拷貝構造函數時發現一個問題&#xff1a;在函數中返回局部的類對象時&#xff0c;并沒有調用拷貝構造函數。針對這個問題&#xff0c;查閱了一些資料&#xff0c;這里記錄整理一下。 調用拷貝構造函數的三種情況&#xff1a; ① 用一個類去初始化另一個對象時&a…
閱讀更多...
【數據結構與算法 | 基礎篇 | 隊列篇】力扣102, 107

【數據結構與算法 | 基礎篇 | 隊列篇】力扣102, 107

1. 力扣102 : 二叉樹的層序遍歷 (1). 題 給你二叉樹的根節點 root &#xff0c;返回其節點值的 層序遍歷 。 &#xff08;即逐層地&#xff0c;從左到右訪問所有節點&#xff09;。 示例 1&#xff1a; 輸入&#xff1a;root [3,9,20,null,null,15,7] 輸出&#xff1a;[[3]…
閱讀更多...
對于高速信號完整性，一塊聊聊啊（18）

對于高速信號完整性，一塊聊聊啊（18）

本文摘錄一篇Allegro進行后仿真的完整流程，可能allegro版本有點老，但整個過程還是描述比較詳細的。 目錄 1、獲取IBIS模型 1.1模型下載 1.2檢查IBIS模型 1.3IBIS轉換為DML 1.4保存DML模型 2、仿真準備 2.1疊層設置 2.2電源網格設置 2.3仿真庫配置 3、仿真 3.1拓撲…
閱讀更多...
刷爆leetcode第六期

刷爆leetcode第六期

題目一 用隊列實現棧 請你僅使用兩個隊列實現一個后入先出&#xff08;LIFO&#xff09;的棧&#xff0c;并支持普通棧的全部四種操作&#xff08;push、top、pop 和 empty&#xff09;。 實現 MyStack 類&#xff1a; void push(int x) 將元素 x 壓入棧頂。 int pop() 移除…
閱讀更多...
【漏洞復現】大華智能物聯綜合管理平臺 fastjson遠程代碼執行漏洞

【漏洞復現】大華智能物聯綜合管理平臺 fastjson遠程代碼執行漏洞

0x01 產品簡介 大華ICC智能物聯綜合管理平臺對技術組件進行模塊化和松耦合&#xff0c;將解決方案分層分級&#xff0c;提高面向智慧物聯的數據接入與生態合作能力。 0x02 漏洞概述 由于大華智能物聯綜合管理平臺使用了存在漏洞的Fastson組件,未經身份驗讓的攻擊者可利用 /e…
閱讀更多...
M功能-支付平臺(六)

M功能-支付平臺(六)

target&#xff1a;離開柬埔寨倒計時-217day 今天突然發現我在csdn居然把我ip屬地搞出來了&#xff0c;之前都沒注意到&#xff0c;哎 前言 M功能演示版本做到后期(也就是第二周的后面3天)真的很心酸&#xff0c;這邊安排的4后端后面都放棄了&#xff0c;覺得做不出來&#…
閱讀更多...
ARM-V9 RME(Realm Management Extension)系統架構之系統能力的內存隔離和保護

ARM-V9 RME(Realm Management Extension)系統架構之系統能力的內存隔離和保護

安全之安全(security)博客目錄導讀 目錄 一、內存隔離和保護 1、顆粒PAS過濾Granular PAS filtering 2、Cache的一致性維護 2.1 物理別名點 Point of Physical Aliasing (PoPA) 2.2 加密點 3、內存(DRAM)保護 3.1 內存加密和完整性 3.2 DRAM scrubbing 本博客探討 RME…
閱讀更多...
網絡編程 —— Http使用httpClient實現頁面爬蟲

網絡編程 —— Http使用httpClient實現頁面爬蟲

先去找類型的a標簽 取出圖片所在網址 取出https://desk.3gbizhi.com/deskMV/438.html 搭建Form界面 Http類 public static HttpClient Client { get; } static Http() {HttpClientHandler handler new HttpClientHandler();//處理消息對象//ServerCertificateCustomValidat…
閱讀更多...
安卓手機APP開發___設置鬧鐘

安卓手機APP開發___設置鬧鐘

安卓手機APP開發___設置鬧鐘 目錄 概述 設置不精確鬧鐘 在特定時間后發出鬧鐘 在特定時間范圍內觸發鬧鐘 以大致有規律的時間間隔響起重復鬧鐘 設置精確的鬧鐘 系統會在未來的某個精確時刻調用精確鬧鐘。 可能不需要精確鬧鐘的用例 設置精確鬧鐘的方法 系統資源消耗…
閱讀更多...
萬億應急國債項目之通信指揮類應急裝備多鏈路聚合通信設備在應急行業中的重要作用

萬億應急國債項目之通信指揮類應急裝備多鏈路聚合通信設備在應急行業中的重要作用

萬億應急國債項目的推出&#xff0c;無疑是我國在應急領域的一次重大舉措。在這一宏大藍圖中&#xff0c;通信指揮類應急裝備的多鏈路聚合通信設備顯得尤為重要&#xff0c;其在應急行業中所發揮的作用&#xff0c;堪稱不可或缺的關鍵一環。 通信指揮是應急響應中的核心環節&a…
閱讀更多...
QT C++ 讀寫mySQL數據庫 圖片 例子

QT C++ 讀寫mySQL數據庫 圖片 例子

在上篇文章中描述了怎樣搭建讀寫數據庫的環境。 本文更進一步&#xff0c;描述了讀寫mySQL數據庫&#xff0c;字符、整型數字、圖片。讀寫圖片相對難點。 數據庫的圖片字段用BLOB&#xff0c;如果圖片較大要用longblob,否則會報錯。 另外&#xff0c;讀寫數據庫都使用了短連…
閱讀更多...
最新文章

Copyright @ 2022~2023