前言

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 ，我们将创建一个用于语音识别的自定义可组合项。

Web Speech API 使开发人员能够在 Web 浏览器中实现语音识别和语音合成功能，使 Web 应用程序能够将语音数据转换为可读的文本格式。

使用 SpeechRecognition() 构造函数进行初始化，它创建一个新的语音识别对象实例。

创建可组合项时需要注意一些重要事项，包括命名约定。可组合函数使用驼峰式大小写，名称以前缀 use 开头。例如，我们用于演示的可组合函数将命名为 useSpeechRecognition 。

就像常规函数一样，可组合项接受可用于需要动态数据的函数的参数。他返回一个 refs 对象。因此，即使可组合项被解构以用于不同的组件，这些值仍将保持其响应式。

基本结构如下：

export default function useComposableFunction() { 
  return {// return values}
}

让我们创建 useSpeechRecognition 组合函数。在 composable 文件夹中，创建一个名为 useSpeechRecognition.js 的新文件，然后将以下逻辑功能放入其中：

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}

最后，我们在组件中实现该功能：

<template>
  <div class="app">
    <div v-if="!isSupported">
      浏览器不支持
      <a
        href="https://caniuse.com/mdn-api_speechrecognition"
        target="_blank"
      >more details</a>
    </div>
    <div v-else >
      <header>
      <h1> 语音识别  </h1>
      <i class="header-icon fas fa-microphone-alt"></i>
    </header>
    <main>
      <div class="mic-buttons"> 
    <button v-if="!isListening" @click="start">
        Speak 
      </button>
      <button v-if="isListening" class="orange" @click="stop">
        Stop
      </button>
      </div>
      <h2> 翻译 </h2> 
      <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 应用程序中实现语音识别功能，该功能也可以重复用于不同的功能。

全文完

谢谢！

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天

点击查看活动详情

Vue 可组合项入门-手把手创建一个语音识别

前言

什么是 Vue 组合式？

组合式的可重用性

创建 Vue 可组合项

最终结果

谢谢！