Vue3—更具可视化的 Composition API 栗子

2023-10-13 08:11:03

Vue3 - 更具可视化的 Composition API 栗子

Composition API是 Vue3 中新引入的一个非常重要的功能，它提供了一种新的方式来组织和管理组件的状态。与传统的 Options API 相比，Composition API 具有更强的灵活性、可重用性和可测试性。

为了更好地理解 Composition API 的用法，我们可以来看一个官方提供的深入骨髓的小栗子：

<template>
  <div>
    <input v-model="searchQuery">
    <ul>
      <li v-for="repo in repos" :key="repo.id">
        {{ repo.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'

export default {
  setup() {
    const searchQuery = ref('')
    const repos = reactive([])

    const filteredRepos = computed(() => {
      return repos.filter(repo => {
        return repo.name.toLowerCase().includes(searchQuery.value.toLowerCase())
      })
    })

    return {
      searchQuery,
      repos,
      filteredRepos
    }
  }
}
</script>

在这个栗子中，我们使用 Composition API 来管理组件的状态。我们首先定义了三个响应式变量：searchQuery、repos 和 filteredRepos。searchQuery 是一个用来存储搜索查询的变量，repos 是一个用来存储仓库列表的变量，filteredRepos 是一个用来存储经过过滤的仓库列表的变量。

接下来，我们使用 computed 函数来计算 filteredRepos 的值。computed 函数会在 searchQuery 的值发生变化时自动重新计算 filteredRepos 的值。这样，当用户在搜索框中输入内容时，filteredRepos 的值就会自动更新，并且页面上显示的仓库列表也会随之更新。

Composition API 的这种用法非常灵活，我们可以根据自己的需要来定义不同的响应式变量和计算函数。这使得 Composition API 非常适合构建复杂的用户界面。

如何合理使用 Composition API

在使用 Composition API 时，有以下几点需要注意：

避免在 Composition API 中使用 this 。 this 关键字在 Composition API 中没有意义，因为它不是一个组件实例。
使用 Composition API 时，应尽量将状态和逻辑封装在单独的函数中。 这可以使代码更加易于理解和维护。
Composition API 可以与 Options API 混合使用。 这意味着，您可以在同一个组件中同时使用 Composition API 和 Options API。

Composition API 实例

以下是一些 Composition API 的实例：