10个Vue3中常用的组合式 API用法详解
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 的优势.
以上就是10个Vue3中常用的组合式 API用法详解的详细内容，更多关于Vue3组合式 API的资料请关注脚本之家其它相关文章！
相关文章
利用vue.js把静态json绑定bootstrap的table方法
今天小编就为大家分享一篇利用vue.js把静态json绑定bootstrap的table方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了手把手教你vue-cli单页到多页应用的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
解决vue使用vant轮播组件swipe + flex时文字抖动问题
这篇文章主要介绍了解决vue使用vant轮播组件swipe + flex时文字抖动问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-01-01
vue-router是Vue.js官方提供的一套专用的路由工具库。这篇文章主要介绍了使用vue-router完成简单导航功能,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了vue3中的ref和reactive定义数组方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue中代码传送(teleport)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
基于vue2.0+vuex+localStorage开发的本地记事本示例
这篇文章主要介绍了基于vue2.0+vuex+localStorage开发的本地记事本示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-02-02
这篇文章主要给大家介绍了关于vuex刷新后数据丢失的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了使用Vue写一个datepicker的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
最新评论