10個Vue3中常用的組合式?API用法詳解

更新時間：2024年01月03日 08:49:21 作者：爭取不脫發(fā)的程序猿

通過Vue?3,組合式API增強了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個常用的Vue3組合式API,希望對大家有所幫助

Refs

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

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

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

Computed

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

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

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

Watch 和 WatchEffect

Vue的watch和watchEffect函數(shù)允許我們觀察值的變化并相應地做出反應。watch函數(shù)用于監(jiān)視特定數(shù)據的變化，并在數(shù)據變化時執(zhí)行回調函數(shù)。它接受兩個參數(shù)：要監(jiān)視的數(shù)據和回調函數(shù)。當監(jiān)視的數(shù)據發(fā)生變化時，回調函數(shù)將被觸發(fā)。watchEffect函數(shù)也用于監(jiān)視數(shù)據的變化，但它不需要指定要監(jiān)視的特定數(shù)據。相反，它會自動追蹤在其函數(shù)體中使用的任何響應式數(shù)據，并在這些數(shù)據發(fā)生變化時觸發(fā)回調函數(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}`);  
});

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

重用方法和函數(shù)

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

  //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>

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

生命周期

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

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

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

API請求和異步

在Vue組件中進行API請求和管理異步操作時，可以使用像axios這樣的庫。

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);  
}  
};

在這個例子中，使用axios庫進行了一個API請求，嘗試檢索數(shù)據。任何錯誤都被記錄到控制臺。

路由和Vue Router

在Vue項目中啟用頁面之間的導航并配置路由，可以使用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>

在這個例子中，使用Vue Router建立了一個簡單的路由配置，并使用useRoute函數(shù)在組件內部訪問當前路由的信息。

Vuex

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

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>

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

UI組件

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

<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  
};

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

測試驅動開發(fā)（TDD）

測試驅動開發(fā)是一種開發(fā)方法，其核心理念是在編寫實際代碼之前先編寫測試。在Vue.js開發(fā)中，TDD可以幫助確保應用的各個部分具有良好的測試覆蓋率，提高代碼質量和可維護性。

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

在這個例子中，使用Vue Test Utils進行了一個簡單的測試，以確保組件正確渲染。

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

以上就是10個Vue3中常用的組合式 API用法詳解的詳細內容，更多關于Vue3組合式 API的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: