手把手教你使用 Vue3 中的 Composition API 来封装一个商品列表组件

本文我们将使用 Composition API 来封装一个商品列表组件，功能分为两块逻辑：列表查询和按商品名称过滤，涉及到新的 API 有 setup 中的 ref、onMounted、watch、computed，看完后你将掌握 Composition API 的基本用法。

为什么使用composition API封装组件？

• 当组件越来越庞大时，组件内的代码逻辑也越来越混杂，导致后期维护困难，使用 Composition API 可以将组件内的各个业务逻辑分离开。

• 分离开的代码逻辑点可以复用，比如获取商品列表代码逻辑片段可以在任何组件中去复用。

• 使用 Composition API 编写的代码更易读，逻辑点清晰，更方便后面接手开发者维护。

setup 方法是什么？

简而言之，setup 就是用来整合各个代码逻辑片段的容器，在这里声明所有的响应式属性、计算属性、watchers 和生命周期钩子，然后暴露出去，在其它组件中使用。

WARNING：由于在执行 setup 时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

开始吧

我们先将列表查询和按名字过滤两端代码逻辑都写在 setup 中，最后再做拆分重组至新组件使用。

商品列表逻辑

1、ref

首先我们用 ref 创建一个商品列表

import { ref } from 'vue'

setup () {
  const goodsList = ref([])
}

ref 对我们的值创建了一个响应式引用，类似于

data() {
  return {
    goodsList: {
      value: []
    }
  }
}

2、props

我们调用获取商品列表接口需要知道是哪个用户调用的，所以需要一个参数 user，从外部传入，props 接收

import { ref } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
  const goodsList = ref([])
  const getGoodsList = async () => {
    goodsList.value = await fetchGoodsList(props.user)
  }
  
  // 将商品列表和数据获取方法暴露出去
  return {
    goodsList,
    fetchGoodsList
  }
}

3、onMounted

onMounted 类似于我们以往使用的生命周期钩子函数 mounted，简单来说就是 setup 中的钩子函数，我们用此函数来调用 getGoodsList 方法获取商品列表。

import { ref, onMounted } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
  const goodsList = ref([])
  const getGoodsList = async () => {
    goodsList.value = await fetchGoodsList(props.user)
  }
  
  onMounted(getGoodsList)
  
  return {
    goodsList,
    getGoodsList
  }
}

4、watch

在使用 watch 之前我们先要了解 toRefs，该函数就是为了确保我们的侦听器能够对 user prop 所做的更改做出反应。

watch 也就是 setup 中的监听器，和以往使用的 wacth 一样

watch(user, (newValue, oldValue) => {})

import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
  // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  const { user } = toRefs(props)

  const goodsList = ref([])
  const getGoodsList = async () => {
    goodsList.value = await fetchGoodsList(user.value) // 注意这里的 props.user 改为了 user.value
  }
  
  onMounted(getGoodsList)
  
  // 监听 user 变化
  watch(user, getGoodsList)
  
  return {
    goodsList,
    getGoodsList
  }
}

至此，获取商品列表的逻辑点写完了。

商品过滤逻辑

接下来就是商品列表按商品名称进行过滤了，定义名称搜索变量 goodsName，写入搜索方法 searchByGoodsName，这里我们使用到 computed 方法，和以前使用的 computed 用法也基本一致。

import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'
setup (props) {
  const { user } = toRefs(props)

  const goodsList = ref([])
  const getGoodsList = async () => {
    goodsList.value = await fetchGoodsList(user.value)
  }
  
  onMounted(getGoodsList)
  watch(user, getGoodsList)
  
  // 商品过滤逻辑
  const goodsName = ref('')
  const searchByGoodsName = computed(() => {
    return goodsList.value.filter(
      goods => goods.name.includes(goodName.value)
    )
  })
  
  return {
    goodsList,
    getGoodsList,
    goodsName,
    searchByGoodsName
  }
}

拆分并重组

现在我们要把这两个逻辑的代码分别拆分到两个文件中去维护，然后再引用重组到一个新的组件中去使用。

拆分商品列表逻辑

// src/composables/useGoodsList.js

import { ref, onMounted, toRefs, watch } from 'vue'
import { fetchGoodsList } from '@/api/fetchGoodsList'

export default function useGoodsList(user) {
  const goodsList = ref([])
  const getGoodsList = async () => {
    goodsList.value = await fetchGoodsList(user.value)
  }

  onMounted(getGoodsList)
  watch(user, getGoodsList)

  return {
    goodsList,
    getGoodsList
  }
}

拆分商品过滤逻辑

// src/composables/useSearchByGoodsName.js

import { ref, onMounted, watch, toRefs } from 'vue'

export default function useSearchByGoodsName(goodsList) {
  const goodsName = ref('')
  const searchByGoodsName = computed(() => {
    return goodsList.value.filter(
      goods => goods.name.includes(goodName.value)
    )
  })

  return {
    goodsName,
    searchByGoodsName
  }
}

重组至新组件使用

// src/components/goodsListAndSearch.vue
import useGoodsList from '@/composables/useGoodsList'
import useSearchByGoodsName from '@/composables/useSearchByGoodsName'
import { toRefs } from 'vue'

export default {
  props: {
    user: { type: String }
  },
  setup(props) {
    const { user } = toRefs(props)

    const { goodsList, getGoodsList } = useGoodsList(user)

    const { goodsName, searchByGoodsName} = useSearchByGoodsName(goodsList)

    return {
      goodsList
      getGoodsList,
      goodsName,
      searchByGoodsName
    }
  }
}

至此商品列表+过滤组件就封装完成了，我们可以在新组件 goodsListAndSearch.vue 中任意去调用 setup 暴露出来的方法和响应式引用。

总而言之，Composition API 的核心就是将组件的逻辑功能点拆分复用，方便维护。

参考文档：vue3js.cn/docs/zh/guide/composition-api-introduction.html

- END -

● 工作六年 我终于学会了这项技能 可惜晚了！！！
● 6.7K Star 的知名开源项目源码，该怎么看？
● 字节跳动的真实工作体验
● 在外企大厂当程序媛是种什么样的体验？

「分享」「点赞」「在看」是最大支持