Vue3中的组合函数：将组件逻辑结构化-Vue.js-PHP中文网

vue3是一个重要的前端框架，它提供了许多有用的特性和功能，其中之一便是组件。vue组件是前端开发中常用的抽象概念，它将前端页面切分为单独的、可重复使用的部分，这些部分具有独立的状态和行为，并可以在不同的应用中重复使用。

然而，在实践中，由于前端页面的复杂性和不同组件之间的交互，组件可能会变得混乱不堪，难以维护。因此，Vue3提供了一种称为组合函数的新功能，它可以有效地将组件逻辑结构化，从而提高代码的可读性和可维护性。以下是关于Vue3组合函数的一些介绍。

什么是组合函数？

组合函数是一种在Vue3中使用的新函数，它允许开发者把组件的逻辑功能拆分成多个可重用的函数，并将它们组合在一起。

在Vue2中，组件逻辑是通过选项来实现的，例如methods、computed、watcher等。但是，这种方法可能会导致代码结构混乱，因为所有相关的选项都必须放在同一个对象中。

Vue3通过组合函数来改变这一点。它允许我们以更细粒度的方式组织组件逻辑，将功能拆分成更小的、独立的函数。每个组合函数只关注某个方面的逻辑，例如网络请求、状态更新或事件处理等。可以通过组合函数将它们组合在一起，以实现更复杂的功能。

组合函数的优点

使用组合函数的主要优点有：

1. 提高代码重用性

组合函数将组件逻辑拆分为小块，使得这些小块可以在不同的地方进行复用。例如，我们可以把一个获取数据的函数提取出来，然后在组件中多次调用它，而不必每个组件都重复编写该方法。

2. 提高代码可读性

使用组合函数可以使代码结构更加清晰和易于理解。每个函数都只关注某个特定方面的逻辑，这使得代码更加集中，易于维护。

3. 独立性

组合函数具有更好的独立性。每个函数只关注某个特定方面的逻辑，这样每个函数的功能将更简单明了，更容易测试和维护。

Vue

避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。

下载

实际应用

让我们通过一个具体的示例来了解如何使用Vue3中的组合函数。

假设我们有一个需要在多个位置使用的搜索组件，该组件有以下逻辑：

接收一个搜索词作为参数。
通过调用API去搜索相应的数据。
将搜索结果展示在界面上。

对于这个组件，我们可以创建一个名为useSearch的组合函数，它包含了上述三个逻辑：

import { ref } from 'vue'

export default function useSearch(keyword) {
  const searchResult = ref([])

  // 调用搜索API，并更新搜索结果
  async function search() {
    const res = await fetch(`https://api/?q=${keyword}`)
    searchResult.value = await res.json()
  }

  search() // 初始化调用一次

  return {
    searchResult,
    search
  }
}

in component

<template><div>
    <input type="text" v-model="keyword"><ul>
<li v-for="(item, index) in searchResult" :key="index">{{ item }}</li>
    </ul>
</div>
</template><script>
import useSearch from './useSearch'

export default {
  setup() {
    const { search, searchResult } = useSearch('default')

    const keyword = ref('')

    function doSearch() {
      search(keyword.value)
    }

    return {
      searchResult,
      keyword,
      doSearch
    }
  }
}
</script>

通过将组件逻辑拆分为单独的函数来创建useSearch，我们可以在任何需要搜索功能的地方重复使用它。在组件中，我们引用useSearch并创建一个与组件相关联的搜索状态，以及一个doSearch函数，这个函数通过调用search()函数来更新搜索状态。