Vue3 常用的10个组合式 API

2024-01-025,917阅读6分钟

Vue.js是一个用于开发Web应用程序的强大JavaScript框架。Vue 2 于 2023 年 12 月 31 日停止维护。而通过Vue 3，组合式API增强了我们利用Vue的能力，使我们的代码更具模块性和可读性。下面分享10个常用的Vue3组合式API：

Refs

在Vue 3中，通过组合式API提供的ref函数，数据管理变得更加便利。ref允许我们使用Vue的响应式系统跟踪变量的值，使我们能够在组件内更新这个值。ref还将值包装起来，以与Vue的响应性兼容。这样，我们可以更灵活地处理和更新组件中的数据。

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

在这个例子中，定义了一个名为count的ref，并使用increment函数递增它的值。

Computed

使用组合式API创建计算属性有助于在组件内基于依赖关系表示和自动更新值。在Vue 3中，可以使用computed函数来定义计算属性。计算属性依赖于其他响应式数据，并且只有在依赖发生变化时才会重新计算值。这使得在组件中表示和处理衍生数据变得更为简便和高效。

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

在这个例子中，定义了一个名为squared的计算属性，表示count的平方。

Watch 和 WatchEffect

Vue的watch和watchEffect函数允许我们观察值的变化并相应地做出反应。watch函数用于监视特定数据的变化，并在数据变化时执行回调函数。它接受两个参数：要监视的数据和回调函数。当监视的数据发生变化时，回调函数将被触发。watchEffect函数也用于监视数据的变化，但它不需要指定要监视的特定数据。相反，它会自动追踪在其函数体中使用的任何响应式数据，并在这些数据发生变化时触发回调函数。

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函数观察count值的变化，而watchEffect函数在每次渲染后观察count值。

重用方法和函数

在Vue组件中将方法和函数定制为自定义钩子使它们能够在其他组件中被重复使用，提高代码的可读性和可重用性。我们可以将一些具有通用性的逻辑封装为函数或方法，并在需要的时候通过自定义钩子进行重用。这样做不仅使代码更易于维护，还提高了组件之间的代码共享。

  //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 函数来管理组件的生命周期。onMounted 钩子在组件被挂载到DOM后调用。onUpdated 钩子在组件更新后调用。onUnmounted 钩子在组件被销毁前调用。

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

 

在这个例子中，onMounted 函数捕获了组件挂载时的时刻，而 onUnmounted 函数捕获了组件卸载时的时刻。

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请求，尝试检索数据。任何错误都被记录到控制台。

路由和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函数在组件内部访问当前路由的信息。

Vuex

使用Vuex进行大型应用的状态管理，在大型应用中，为了更有效地管理状态，可以使用Vuex，它是Vue.js官方提供的状态管理库。Vuex允许你在应用的多个组件之间共享和管理状态，以确保状态的一致性和可维护性。

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创建了一个简单的store，并使用useStore函数在组件内部访问store。

UI组件

创建可定制和可重用的Vue UI组件，在Vue.js中，你可以创建可定制和可重用的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  
};  

在这个例子中，创建了一个可定制的按钮组件，通过使用插槽slot实现动态内容。

测试驱动开发（TDD）

测试驱动开发是一种开发方法，其核心理念是在编写实际代码之前先编写测试。在Vue.js开发中，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 引入了一种新的组件组织形式，以及更灵活的逻辑组织方式。允许将组件的逻辑按照功能划分到不同的函数中，而不再局限于原先的选项（data、methods、computed等）。通过创建可复用的函数，你可以在不同的组件中使用相同的逻辑，从而提高代码的可维护性和可复用性。提供了更好的 TypeScript 支持，使得在 Vue 项目中使用 TypeScript 更加流畅。使得开发者能够更好地处理复杂的组件逻辑，并在项目中更好地利用 TypeScript 的优势.