Vue.js是一個(gè)用于開(kāi)發(fā)Web應(yīng)用程序的強(qiáng)大JavaScript框架。Vue 2 于 2023 年 12 月 31 日停止維護(hù)。而通過(guò)Vue 3，組合式API增強(qiáng)了我們利用Vue的能力，使我們的代碼更具模塊性和可讀性。下面分享10個(gè)常用的Vue3組合式API：

Refs

在Vue 3中，通過(guò)組合式API提供的ref函數(shù)，數(shù)據(jù)管理變得更加便利。ref允許我們使用Vue的響應(yīng)式系統(tǒng)跟蹤變量的值，使我們能夠在組件內(nèi)更新這個(gè)值。ref還將值包裝起來(lái)，以與Vue的響應(yīng)性兼容。這樣，我們可以更靈活地處理和更新組件中的數(shù)據(jù)。

import { ref } from 'vue';  
  
const count = ref(0);  
  
const increment = () => {  
count.value++;  
};  

在這個(gè)例子中，定義了一個(gè)名為count的ref，并使用increment函數(shù)遞增它的值。

Computed

使用組合式API創(chuàng)建計(jì)算屬性有助于在組件內(nèi)基于依賴(lài)關(guān)系表示和自動(dòng)更新值。在Vue 3中，可以使用computed函數(shù)來(lái)定義計(jì)算屬性。計(jì)算屬性依賴(lài)于其他響應(yīng)式數(shù)據(jù)，并且只有在依賴(lài)發(fā)生變化時(shí)才會(huì)重新計(jì)算值。這使得在組件中表示和處理衍生數(shù)據(jù)變得更為簡(jiǎn)便和高效。

import { ref, computed } from 'vue';  
  
const count = ref(0);  
  
const squared = computed(() => count.value * count.value);  

在這個(gè)例子中，定義了一個(gè)名為squared的計(jì)算屬性，表示count的平方。

Watch 和 WatchEffect

Vue的watch和watchEffect函數(shù)允許我們觀(guān)察值的變化并相應(yīng)地做出反應(yīng)。watch函數(shù)用于監(jiān)視特定數(shù)據(jù)的變化，并在數(shù)據(jù)變化時(shí)執(zhí)行回調(diào)函數(shù)。它接受兩個(gè)參數(shù)：要監(jiān)視的數(shù)據(jù)和回調(diào)函數(shù)。當(dāng)監(jiān)視的數(shù)據(jù)發(fā)生變化時(shí)，回調(diào)函數(shù)將被觸發(fā)。watchEffect函數(shù)也用于監(jiān)視數(shù)據(jù)的變化，但它不需要指定要監(jiān)視的特定數(shù)據(jù)。相反，它會(huì)自動(dòng)追蹤在其函數(shù)體中使用的任何響應(yīng)式數(shù)據(jù)，并在這些數(shù)據(jù)發(fā)生變化時(shí)觸發(fā)回調(diào)函數(shù)。

import { ref, watch, watchEffect } from 'vue';  
  
const count = ref(0);  
  
watch(count, (newValue, oldValue) => {  
    console.log(`Count changed from ${oldValue} to ${newValue}`);  
});  
  
watchEffect(() => {  
    console.log(`Count is: ${count.value}`);  
});  

在這個(gè)例子中，watch函數(shù)觀(guān)察count值的變化，而watchEffect函數(shù)在每次渲染后觀(guān)察count值。

重用方法和函數(shù)

在Vue組件中將方法和函數(shù)定制為自定義鉤子使它們能夠在其他組件中被重復(fù)使用，提高代碼的可讀性和可重用性。我們可以將一些具有通用性的邏輯封裝為函數(shù)或方法，并在需要的時(shí)候通過(guò)自定義鉤子進(jìn)行重用。這樣做不僅使代碼更易于維護(hù)，還提高了組件之間的代碼共享。

  //hooks/useLocalStorage.js
export default function useLocalStorage(key, defaultValue) {  
    const value = ref(JSON.parse(localStorage.getItem(key)) || defaultValue);  
  
const updateValue = (newValue) => {  
    value.value = newValue;  
    localStorage.setItem(key, JSON.stringify(newValue));  
};  
  
return {  
value,  
updateValue,  
};  
}

<script setup>  
import useLocalStorage from '@/hooks/useLocalStorage';  
  
const { value: storedData, updateValue: updateStoredData } = useLocalStorage('dataKey', 'defaultData');  
</script>

在這個(gè)例子中，定義了一個(gè)名為useLocalStorage的自定義鉤子，用于處理存儲(chǔ)在本地存儲(chǔ)中的值，該值由指定的鍵（key）決定。

生命周期

在組合式API中，通過(guò)使用 onMounted、onUpdated 和 onUnmounted 函數(shù)來(lái)管理組件的生命周期。onMounted 鉤子在組件被掛載到DOM后調(diào)用。onUpdated 鉤子在組件更新后調(diào)用。onUnmounted 鉤子在組件被銷(xiāo)毀前調(diào)用。

import { onMounted, onUnmounted } from 'vue';  
  
onMounted(() => {  
    console.log('Component is mounted');  
});  
  
onUnmounted(() => {  
    console.log('Component is unmounted');  
});  

在這個(gè)例子中，onMounted 函數(shù)捕獲了組件掛載時(shí)的時(shí)刻，而 onUnmounted 函數(shù)捕獲了組件卸載時(shí)的時(shí)刻。

API請(qǐng)求和異步

在Vue組件中進(jìn)行API請(qǐng)求和管理異步操作時(shí)，可以使用像axios這樣的庫(kù)。

import axios from 'axios';
import {ref} from 'vue';    
const fetchData = async () => {  
try {  
const response = await axios.get('https://api.example.com/data');
    console.log('Data:', response.data);  
} catch (error) {
        console.error('Error fetching data:', error);  
}  
};

在這個(gè)例子中，使用axios庫(kù)進(jìn)行了一個(gè)API請(qǐng)求，嘗試檢索數(shù)據(jù)。任何錯(cuò)誤都被記錄到控制臺(tái)。

路由和Vue Router

在Vue項(xiàng)目中啟用頁(yè)面之間的導(dǎo)航并配置路由，可以使用Vue Router。

const routes = [
    { path: '/', component: Home },
    { path: '/about', component: About },
];

const router = createRouter({
    history: createWebHashHistory(),
    routes,
});  


<script setup>
        import {useRoute} from 'vue-router';

        const route = useRoute();
</script>

在這個(gè)例子中，使用Vue Router建立了一個(gè)簡(jiǎn)單的路由配置，并使用useRoute函數(shù)在組件內(nèi)部訪(fǎng)問(wèn)當(dāng)前路由的信息。

Vuex

使用Vuex進(jìn)行大型應(yīng)用的狀態(tài)管理，在大型應(yīng)用中，為了更有效地管理狀態(tài)，可以使用Vuex，它是Vue.js官方提供的狀態(tài)管理庫(kù)。Vuex允許你在應(yīng)用的多個(gè)組件之間共享和管理狀態(tài)，以確保狀態(tài)的一致性和可維護(hù)性。

import { createStore } from 'vuex';  
  
const store = createStore({  
state: {  
    count: 0,  
},  
mutations: {  
    increment(state) {  
    state.count++;  
},  
},  
});  

   
<script setup>  
import { useStore } from 'vuex';  
  
const store = useStore();  
</script>

在這個(gè)例子中，使用Vuex創(chuàng)建了一個(gè)簡(jiǎn)單的store，并使用useStore函數(shù)在組件內(nèi)部訪(fǎng)問(wèn)store。

UI組件

創(chuàng)建可定制和可重用的Vue UI組件，在Vue.js中，你可以創(chuàng)建可定制和可重用的Vue UI組件，使得這些組件在應(yīng)用中能夠靈活適應(yīng)不同的需求。在設(shè)計(jì)組件時(shí)，考慮到組件的靈活性、易用性和可維護(hù)性是至關(guān)重要的。

<button :class="buttonClass" @click="handleClick">  
<slot></slot>  
</button>  
</template>  
  
<script setup>  
import { computed } from 'vue';  
  
const buttonClass = computed(() => {  
return 'button ' + (isPrimary ? 'primary' : 'secondary');  
});  
  
const handleClick = () => {  
// Button click operations  
};  

在這個(gè)例子中，創(chuàng)建了一個(gè)可定制的按鈕組件，通過(guò)使用插槽slot實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容。

測(cè)試驅(qū)動(dòng)開(kāi)發(fā)（TDD）

測(cè)試驅(qū)動(dòng)開(kāi)發(fā)是一種開(kāi)發(fā)方法，其核心理念是在編寫(xiě)實(shí)際代碼之前先編寫(xiě)測(cè)試。在Vue.js開(kāi)發(fā)中，TDD可以幫助確保應(yīng)用的各個(gè)部分具有良好的測(cè)試覆蓋率，提高代碼質(zhì)量和可維護(hù)性。

import { mount } from '@vue/test-utils';  
import MyComponent from '@/components/MyComponent.vue';  
  
test('MyComponent renders correctly', () => {  
const wrapper = mount(MyComponent);  
expect(wrapper.html()).toMatchSnapshot();  
});  

在這個(gè)例子中，使用Vue Test Utils進(jìn)行了一個(gè)簡(jiǎn)單的測(cè)試，以確保組件正確渲染。

Vue 3 的 組合式 API 引入了一種新的組件組織形式，以及更靈活的邏輯組織方式。允許將組件的邏輯按照功能劃分到不同的函數(shù)中，而不再局限于原先的選項(xiàng)（data、methods、computed等）。通過(guò)創(chuàng)建可復(fù)用的函數(shù)，你可以在不同的組件中使用相同的邏輯，從而提高代碼的可維護(hù)性和可復(fù)用性。提供了更好的 TypeScript 支持，使得在 Vue 項(xiàng)目中使用 TypeScript 更加流暢。使得開(kāi)發(fā)者能夠更好地處理復(fù)雜的組件邏輯，并在項(xiàng)目中更好地利用 TypeScript 的優(yōu)勢(shì).

以上就是10個(gè)Vue3中常用的組合式 API用法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3組合式 API的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論