1. 计算属性

使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性

如将上面案例，加入过滤功能，作用是在文本框中输入小说名称，然后从当前的结果中过滤出内容并显示

<template>
  <input type="text" v-model="searchQuery" />
  <ul>
    <li v-for="(item, index) in bookMathingSearchQuery" :key="index">
      {{ item.title }}
    </li>
  </ul>
</template>

<script>
import { ref, onMounted, watch, toRefs, computed } from 'vue'
import axios from 'axios'
export default {
  props: {
    categoryId: {
      type: Number,
      default: () => 1,
    },
  },
  name: 'App',
  setup(props) {
    const bookList = ref([])
    const { categoryId } = toRefs(props)
    const getBookList = async () => {
      console.log(categoryId.value)
      const res = await axios.get('http://127.0.0.1:3000/api/book/list', {
        params: {
          id: categoryId.value,
        },
      })
      bookList.value = res.data.data.books
    }

    onMounted(getBookList)
    // 设置侦听器，检测 props.categoryId 的变化
    watch(categoryId, getBookList)

    // 通过计算属性实现过滤功能
    const searchQuery = ref('')
    const bookMathingSearchQuery = computed(() => {
      console.log(1)
      return bookList.value.filter((item) =>
        item.title.includes(searchQuery.value)
      )
    })

    return { bookList, getBookList, bookMathingSearchQuery, searchQuery }
  },
}
</script>

<style>
</style>

2. 优化代码

随着将所有业务代码，也就是逻辑关注点，都放到 setup 中，代码量会越来越大，一个比较好的方式，就是利用模块化的方式，将不同代码拆解到不同模块中

如下面将列表显示和筛选写到了不同模块中

src 目录下新建 composables 目录，其中新建两个模块

useBookList

import { ref, onMounted, watch } from 'vue'
import axios from 'axios'
export default function (categoryId) {
  const bookList = ref([])
  const getBookList = async () => {
    console.log(categoryId.value)
    const res = await axios.get('http://127.0.0.1:3000/api/book/list', {
      params: {
        id: categoryId.value,
      },
    })
    bookList.value = res.data.data.books
  }

  onMounted(getBookList)
  // 设置侦听器，检测 props.categoryId 的变化
  watch(categoryId, getBookList)
  return {
    bookList,
    getBookList
  }
}

useBookQuery

import { ref, computed } from 'vue'
export default function (bookList) {
  // 通过计算属性实现过滤功能
  const searchQuery = ref('')
  const bookMathingSearchQuery = computed(() => {
    console.log(1)
    return bookList.value.filter((item) =>
      item.title.includes(searchQuery.value)
    )
  })
  return {
    bookMathingSearchQuery, searchQuery
  }
}

修改原来组件代码，引入这两个模块，然后修改代码

setup 函数中的代码，是不是变得简练多了，通过这个案例，大家应该也意识到了模块化的重要性了

vue3 组合式API使用第2篇-保证学得会

1. 计算属性

2. 优化代码