Vue 3引入了几个新的概念和处理逻辑的不同方式，其中之一就是Vue composables。Vue可组合物允许我们提取反应状态和功能，以便在其他组件中重新使用。
在这篇文章中，我们将通过在Vue应用程序中实现Vue可组合程序来全面了解Vue可组合程序。让我们开始吧!
什么是Vue可组合函数？
Vue可组合函数是使用组合API来实现一个反应式和可重用的逻辑的函数。可组合函数就像一个外部函数，它提取了可反应的状态和功能，可以在其他几个组件中使用。可组合函数也可以被称为组合函数。
可组合函数类似于Vue 2中Options API的mixins，以及React中Hooks的实现。
可组合函数的可重用性
在现代网络应用中，代码库总是被划分为不同的组件，提供了一个有组织的结构和简单的工作流程。通过可组合函数，你可以进一步简化工作流程，将功能提取并导入到一个外部文件中，然后可以在多个组件中使用。
可组合函数背后的概念是由Composition API带来的，它让你有充分的灵活性将你的组件代码组织成基于逻辑关注点的小函数。
可组合函数的可重用特性提供了许多好处。其一，提取的逻辑可以被重复使用，促进代码组织的结构易于浏览。可组合函数还可以作为一个使用反应状态的实用函数，可以为应用程序的不同目的进行定制。
最后，可组合程序可以根据用例管理输出的状态，允许你选择状态应该是全局的还是局部的。与其他状态管理工具相比，这种自由消除了一些复杂性和依赖性。
可组合函数的另一个有趣之处在于，它们可以相互嵌套，这意味着一个可组合函数可以调用一个或多个其他可组合函数。因此，我们能够将复杂的逻辑分解成更小的单元，就像我们使用组件分离整个应用程序一样。
从头开始创建一个Vue可组合函数
让我们通过在Vue应用程序中创建和使用可组合函数来试试吧。要继续学习本教程，你需要安装Node.js和Vue CLI。首先，创建Vue项目，如下所示。
vue create vue-composables
一旦项目被创建，用以下代码导航到vue-composables 。
cd vue-composables
为了使结构更有条理，我们将创建一个单独的文件夹来处理项目所需的所有组件。
使用Web Speech API，我们将创建一个用于语音识别的自定义组件。Web Speech API使开发者能够在Web浏览器中实现语音识别和语音合成功能，使Web应用有能力将语音数据转换成可读的文本格式。在本教程中，我们将创建一个可在你的应用程序中重复使用的语音识别组件。
该API是通过SpeechRecognition() 构造函数初始化的，它创建了一个新的语音识别对象实例。
在创建一个可组合函数时，有一些重要的事情需要注意，包括命名规则。可组合函数使用骆驼式大小写，即名称以前缀use 开始。例如，我们用于演示的可组合函数将被命名为useSpeechRecognition 。
就像普通函数一样，可组合函数接受参数，可用于需要动态数据的函数。最好从可组合函数返回一个refs 对象。因此，即使在可合成物被解构以用于不同的组件时，这些值仍将保留其反应性。
每个可组合物的基本结构如下。
export default function useComposableFunction() {
// The logic
return {// return values}
}
让我们来创建useSpeechRecognition 组合函数。在composable 文件夹中，创建一个名为useSpeechRecognition.js 的新文件，然后在其中放置以下逻辑功能。
import { ref,watch} from 'vue'
// the function accepts parameters
export function useSpeechRecognition({lang,continuous,interimResults}) {
const isListening = ref(false)
const isFinal = ref(false)
const result = ref('')
const error = ref(')
// Intialize the web speech API
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
// Checks if the browser supports the API
const isSupported = Boolean(SpeechRecognition)
// The speech recognition constructor
const recognition = SpeechRecognition? new SpeechRecognition() : false
// a function to set it for listening
const start = () => {
isListening.value = true
}
// a function to stop it from listening
const stop = () => {
isListening.value = false
}
// Checks if the browser supports
if (isSupported) {
recognition.continuous = continuous
recognition.interimResults = interimResults
recognition.lang = lang
recognition.onstart = () => {
isFinal.value = false
}
// the method to get the result of the transcription
recognition.onresult = (event) => {
// raw words that the user spoke
const transcript = Array.from(event.results)
.map((result) => {
isFinal.value = result.isFinal
return result[0]
})
.map(result => result.transcript)
.join('')
result.value = transcript
error.value = undefined
}
// method to handle error
recognition.onerror = (event) => {
error.value = 'Speech recognition error detected: ' + event.error
}
recognition.onend = () => {
isListening.value = false
}
watch(isListening, () => {
if (isListening.value)
// Starting the speech recognition
recognition.start()
else
// stopping the recognition
recognition.stop()
})
}
}
使用网络语音API，我们能够创建一个函数来接受来自用户的语音，并将其转换为可读文本。首先，我们确保我们的函数接受参数，然后初始化网络语音API，检查浏览器是否支持。我们添加了一个函数来检查我们的API是否在收听isListening.value ，将该值设置为true 或false 。
通过recognition.onresult 方法，我们得到了转录的结果。此外，我们还添加了一些错误处理方法。这种格式节省了我们在不同文件中复制这种逻辑的压力，这取决于我们正在构建什么。
接下来，我们在一个对象中返回这些值和方法。
return {
isSupported,
isListening,
isFinal,
recognition,
result,
error,
start,
stop,
}
然后，我们在一个组件中使用可组合的。在App.vue 文件中，我们首先导入以下函数。
import {useSpeechRecognition} from './composables/useSpeechRecognition'
通过调用该函数，我们存储了从可组合的返回值。我们还传递参数值。
const { isListening, isSupported, stop, result,start,error } = useSpeechRecognition({
lang:'en-US',
continuous: true,
interimResults : true,
})
有了这些设置，我们就可以从可组合中返回将在组件中使用的值。
return {isListening,isSupported,stop,result,start,error}
最后，我们在我们的组件中实现这个函数。
<template>
<div class="app">
<div v-if="!isSupported">
Your browser does not support SpeechRecognition API,
<a
href="https://caniuse.com/mdn-api_speechrecognition"
target="_blank"
>more details</a>
</div>
<div v-else >
<header>
<h1> Speech Recognition </h1>
<i class="header-icon fas fa-microphone-alt"></i>
</header>
<main>
<div class="mic-buttons">
<!-- To handle the controls -->
<button v-if="!isListening" @click="start">
Speak
</button>
<button v-if="isListening" class="orange" @click="stop">
Stop
</button>
</div>
<h2> English Transcript </h2>
<!-- Conditionals to handle errors -->
<p v-if="error" >{{error}}</p>
<div v-else>
<textarea v-model="result" class="text-transcript" cols="30" rows="10"> </textarea>
</div>
</main>
</div>
</div>
</template>
这里有完整代码的链接，如果你想试试的话。
有了这个可组合函数，我们就可以很容易地在我们的Vue应用程序中实现语音识别功能，而且还可以在不同的功能中重复使用。
可合成函数的外部库
在你的Vue应用程序中使用可组合函数的另一种方法是通过外部开源库，这些库是为了利用自定义组合API函数而创建的。
VueUse
VueUse库完全由TypeScript编写，提供了200多个可组合函数，适用于Vue 2和3的应用程序。这些函数可以通过CDN定制并在你的项目中使用，或者直接用npm安装。
npm i @vueuse/core
<script src="https://unpkg.com/@vueuse/core"></script>
文档写得很好，有互动演示和代码。这些函数被分为九种类型。浏览器、传感器、动画、状态、元素、组件、观察、网络、实用工具和杂项。你可以从官方文档中获得更多关于不同函数的信息。
vue-composables
vue-composable是一个提供即用型通用组合API函数的库。vue-composable完全由TypeScript构建，同时支持Vue 2和Vue 3应用程序。你可以使用Yarn或npm来安装它。
# install with yarn
yarn add @vue/composition-api vue-composable
# install with npm
npm install @vue/composition-api vue-composable
它提供的一些功能类别有事件、日期、格式、断点、存储、i18n和Web。你可以从官方文档中了解更多。
结论
可组合函数将逻辑功能单独提取出来，在其他几个组件中重复使用，使你不必为实现相同的结果而在多个不同的实例中复制你的代码。
可组合函数背后的概念改变了我们处理应用程序中可重用性的方式，提供了一种更简单、更灵活、更有效的方法。现在是重构你的代码库的好时机，以便在你的应用程序中使用可组合物
