--- theme: channing-cyan --- ## 前言 Vue 3 引入了**几个新概念**，其中之一就是 Vue 可组合项。在本文中，我们将通过一个语音识别的例子在 Vue 中实现 Vue 可组合项来全面了解它。 ## 什么是 Vue 组合式？ **简单说**：Vue 组合式是使用**组合 API** 来实现**可重用逻辑**的函数。类似于 Vue 2 中中的 mixins，以及 React 中 Hooks 的实现。 ## 组合式的可重用性借助可组合函数，您可以通过将功能代码提取，并导入外部文件来进一步简化您的代码，然后在多个组件中使用。它使您可以**灵活地**根据逻辑将组件代码组织成更小的函数。可组合函数的可重用特性提供了**许多好处**。可以重复使用提取的逻辑，以易于导航的结构促进代码组织。还可以用作响应式的函数。可组合项允许您选择响应式数据是**全局还是局部的**。与其他状态管理工具相比，这种自由消除了一些复杂性和依赖性。最后它们可以**相互嵌套**，这意味着一个可组合函数可以调用一个或多个其他可组合函数。因此，我们能够将复杂的逻辑分解成更小的单元，就像我们如何使用组件拆分一样。 ## 创建 Vue 可组合项 **首先**，创建Vue项目如下： ``` vue create vue-composables ``` 创建项目后，使用以下代码定位到 `vue-composables` ： ``` cd vue-composables ``` 使用 [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API) ，我们将创建一个用于**语音识别**的自定义可组合项。 >Web Speech API 使开发人员能够在 Web 浏览器中实现语音识别和语音合成功能，使 Web 应用程序能够将语音数据转换为可读的文本格式。使用 `SpeechRecognition()` 构造函数进行**初始化**，它创建一个新的语音识别对象实例。创建可组合项时需要**注意一些重要事项**，包括命名约定。可组合函数使用驼峰式大小写，名称以前缀 `use` 开头。例如，我们用于演示的可组合函数将命名为 `useSpeechRecognition` 。就像常规函数一样，可组合项**接受**可用于需要动态数据的函数的参数。他返回一个 `refs` 对象。因此，即使可组合项被解构以用于不同的组件，这些值仍将保持其响应式。基本结构如下： ``` export default function useComposableFunction() { return {// return values} } ``` 让我们创建 `useSpeechRecognition` 组合函数。在 `composable` 文件夹中，创建一个名为 `useSpeechRecognition.js` 的新文件，然后将以下逻辑功能放入其中： ```vue import { ref,watch} from 'vue' export function useSpeechRecognition({lang,continuous,interimResults}) { const isListening = ref(false) const isFinal = ref(false) const result = ref('') const error = ref(') // 初始化 web speech API const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition // 检查浏览器是否支持 const isSupported = Boolean(SpeechRecognition) // 创建构造函数 const recognition = SpeechRecognition? new SpeechRecognition() : false // 设置开始监听函数 const start = () => { isListening.value = true } // 停止监听 const stop = () => { isListening.value = false } // 检查浏览器是否支持 if (isSupported) { recognition.continuous = continuous recognition.interimResults = interimResults recognition.lang = lang recognition.onstart = () => { isFinal.value = false } // 获得响应结果 recognition.onresult = (event) => { 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 } // 错误处理 recognition.onerror = (event) => { error.value = 'Speech recognition error detected: ' + event.error } recognition.onend = () => { isListening.value = false } watch(isListening, () => { if (isListening.value) recognition.start() else recognition.stop() }) } } ``` 使用 Web Speech API，创建一个函数接受用户的语音并将其转换为文本。首先，初始化 Web Speech 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:'zh-CN', continuous: true, interimResults : true, }) ``` 通过此设置，我们然后返回在组件中使用的可组合项的值： ``` return {isListening,isSupported,stop,result,start,error} ``` 最后，我们在组件中实现该功能： ``` ``` ### 最终结果 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/875828a7188b41f89348c426cd3f7b38~tplv-k3u1fbpfcp-watermark.image?) 有了这个可组合项，我们就可以**轻松地**在我们的 Vue 应用程序中实现语音识别功能，该功能也可以重复用于不同的功能。 **全文完** # 谢谢！ **开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天** [点击查看活动详情](https://juejin.cn/post/7194721470063312933 "https://juejin.cn/post/7194721470063312933")

翻译