Vue3自定义hook和封装组件指南

2023-07-25 00:32:18

特性	好处
代码复用性	减少重复代码并提高可维护性
代码组织	将代码组织成更小、更易于管理的块
测试	更容易测试和调试

前言

大家好，今天来聊聊vue3中如何使用自定义hook以及如何对组件进行封装。下面我将基于element-plus组件库，封装一个支持分页和过滤数据的表格组件，主要通过组合式api的方式，对table组件进行二次封装，达到代码复用和提高可维护性的目的。

什么是自定义hook？

自定义hook是vue3中新增的一个特性，它允许我们创建自己的钩子函数，这些钩子函数可以在组件的任何生命周期中使用。这使得我们能够在不修改组件本身的情况下，扩展组件的功能。

自定义hook的优点

自定义hook有以下优点：

代码复用性：我们可以将常用的代码逻辑封装成一个自定义hook，然后在多个组件中使用，这可以减少重复代码并提高可维护性。
代码组织：我们可以将代码组织成更小、更易于管理的块，这使得代码更容易阅读和理解。
测试：自定义hook更容易测试和调试，因为我们可以将它们与组件分开测试。

如何创建自定义hook？

自定义hook的创建非常简单，我们只需要创建一个以use开头的函数，然后在函数内部使用composition API来实现我们的逻辑即可。例如，我们可以创建一个名为usePagination的自定义hook，它可以帮助我们实现分页功能。

import { ref, computed } from 'vue'

export function usePagination(data, pageSize) {
  const currentPage = ref(1)
  const totalPages = computed(() => Math.ceil(data.value.length / pageSize.value))
  const paginatedData = computed(() => data.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value))

  function nextPage() {
    if (currentPage.value < totalPages.value) {
      currentPage.value++
    }
  }

  function previousPage() {
    if (currentPage.value > 1) {
      currentPage.value--
    }
  }

  return {
    currentPage,
    totalPages,
    paginatedData,
    nextPage,
    previousPage
  }
}

如何封装组件？

组件封装是指将组件的代码组织成一个独立的模块，以便我们可以将它们重用在其他地方。组件封装的好处包括：

代码复用性：我们可以将常用的组件封装成一个独立的模块，然后在多个地方使用，这可以减少重复代码并提高可维护性。
代码组织：我们可以将代码组织成更小、更易于管理的块，这使得代码更容易阅读和理解。
测试：封装后的组件更容易测试和调试，因为我们可以将它们与其他组件分开测试。

如何封装一个支持分页和过滤数据的表格组件？

我们可以使用自定义hook和组件封装的知识来封装一个支持分页和过滤数据的表格组件。这个组件可以让我们在不同的页面中使用，并可以根据不同的条件过滤数据。

下面是这个组件的代码：

<template>
  <div>
    <el-table :data="paginatedData" :row-key="rowKey">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="city" label="City"></el-table-column>
    </el-table>
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalPages"
      @current-change="currentPageChanged"
    ></el-pagination>
  </div>
</template>

<script>
import { usePagination } from '@/hooks/usePagination'
import { ref } from 'vue'

export default {
  props: {
    data: {
      type: Array,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    rowKey: {
      type: String,
      default: 'id'
    }
  },
  setup(props) {
    const { currentPage, totalPages, paginatedData, nextPage, previousPage } = usePagination(props.data, props.pageSize)

    function currentPageChanged(newCurrentPage) {
      currentPage.value = newCurrentPage
    }

    return {
      currentPage,
      totalPages,
      paginatedData,
      nextPage,
      previousPage,
      currentPageChanged
    }
  }
}
</script>