Vue 3 的组合式 API-hooks

Vue 3 的组合式 API

组合式 API 是 Vue 3 的核心特性之一，它允许开发者将组件的逻辑拆分为可复用的函数。组合式 API 的主要特点是

• 逻辑复用：将逻辑提取到独立的函数中，方便在多个组件中复用。
• 组织清晰：将相关的逻辑分组，而不是将逻辑分散到 data、methods、computed 等选项中。
• 更接近函数式编程：通过函数组合的方式组织代码。

在 Vue 3 中，自定义 Hooks 是通过组合式 API 的 ref、reactive、watch、computed 等函数实现的

• 基本的自定义 Hook

// useCounter.ts
import { ref } from 'vue';
export function useCounter(initialValue = 0) {const count = ref(initialValue);const increment = () => {count.value++;};const decrement = () => {count.value--;};return { count, increment, decrement };
}

在组件中使用：

<script setup>
import { useCounter } from './useCounter';const { count, increment, decrement } = useCounter(10);
</script><template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template>

• 路由跳转

// useNavigation.ts
import { RouteLocationRaw } from 'vue-router'
import { useRouter } from 'vue-router'export function useNavigation() {const router = useRouter()// 基本跳转const navigateTo = (to: RouteLocationRaw) => {return router.push(to)}// 替换当前路由const replaceRoute = (to: RouteLocationRaw) => {return router.replace(to)}// 返回上一页const goBack = (delta = -1) => {router.go(delta)}// 前进const goForward = () => {router.go(1)}return {navigateTo,replaceRoute,goBack,goForward,router}
}

在组件中使用示例

<script setup lang="ts">
import { useNavigation } from '@/hooks/useNavigation'const {navigateTo,replaceRoute,goBack,goForward
} = useNavigation()// 路径跳转
const gotoHome = () => {navigateTo('/home')
}// 命名路由带参数
const gotoDetail = (id: string) => {navigateTo({name: 'Detail',params: { id }})
}// 带查询参数
const gotoSearch = (keyword: string) => {navigateTo({path: '/search',query: { q: keyword }})
}// 替换当前路由
const replaceToLogin = () => {replaceRoute('/login')
}
</script><template><button @click="gotoHome">首页</button><button @click="gotoDetail('123')">详情页</button><button @click="goBack">返回</button>
</template>

• 消息提示hooks

/useMessage.ts
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import { useI18n } from './useI18n'
export const useMessage = () => {const { t } = useI18n()return {// 消息提示info(content: string) {ElMessage.info(content)},// 错误消息error(content: string) {ElMessage.error(content)},// 成功消息success(content: string) {ElMessage.success(content)},// 警告消息warning(content: string) {ElMessage.warning(content)},// 弹出提示alert(content: string) {ElMessageBox.alert(content, t('common.confirmTitle'))},// 错误提示alertError(content: string) {ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'error' })},// 成功提示alertSuccess(content: string) {ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'success' })},// 警告提示alertWarning(content: string) {ElMessageBox.alert(content, t('common.confirmTitle'), { type: 'warning' })},// 通知提示notify(content: string) {ElNotification.info(content)},// 错误通知notifyError(content: string) {ElNotification.error(content)},// 成功通知notifySuccess(content: string) {ElNotification.success(content)},// 警告通知notifyWarning(content: string) {ElNotification.warning(content)},// 确认窗体confirm(content: string, tip?: string) {return ElMessageBox.confirm(content, tip ? tip : t('common.confirmTitle'), {confirmButtonText: t('common.ok'),cancelButtonText: t('common.cancel'),type: 'warning'})},// 删除窗体delConfirm(content?: string, tip?: string) {return ElMessageBox.confirm(content ? content : t('common.delMessage'),tip ? tip : t('common.confirmTitle'),{confirmButtonText: t('common.ok'),cancelButtonText: t('common.cancel'),type: 'warning'})},// 导出窗体exportConfirm(content?: string, tip?: string) {return ElMessageBox.confirm(content ? content : t('common.exportMessage'),tip ? tip : t('common.confirmTitle'),{confirmButtonText: t('common.ok'),cancelButtonText: t('common.cancel'),type: 'warning'})},// 提交内容prompt(content: string, tip: string) {return ElMessageBox.prompt(content, tip, {confirmButtonText: t('common.ok'),cancelButtonText: t('common.cancel'),type: 'warning'})}}
}