用好 Vue3 组合式 API 搭建简洁高效的 UI 架构

2023-10-23 08:16:46

迈入 Vue3 组合式 API 的世界

在 Vue2 时代，我们在组件中往往需要分散处理各种业务逻辑，如生命周期钩子、计算属性、侦听器等，这使得代码变得繁杂且难以维护。Vue3 组合式 API 的出现，一扫这些弊端，将这些代码全部集中到 Setup 函数中，带来了更简洁、更易读的代码结构。

Setup 的魔力

Setup 函数是 Vue3 组合式 API 的核心，它就像一个中枢，将各种功能整合在一起。在 Setup 函数中，我们可以定义响应式数据、计算属性、侦听器，甚至还可以调用其他函数。这使得我们可以将组件的逻辑清晰地组织起来，便于阅读和维护。

逻辑抽离的艺术

Vue3 组合式 API 鼓励我们对组件的逻辑进行抽离，将通用逻辑和业务逻辑分离。通用逻辑可以封装成一个个独立的函数，供多个组件复用。这样，既可以避免代码重复，又能提高代码的可维护性。

代码复用的魅力

Vue3 组合式 API 还提供了强大的代码复用能力。我们可以将 Setup 函数中的代码提取出来，形成独立的函数或组件，供其他组件复用。这极大地提高了代码的复用性，减少了开发时间。

实战：搭建简洁高效的 UI 架构

接下来，我们将通过一个实际案例，演示如何使用 Vue3 组合式 API 构建简洁高效的 UI 架构。

项目背景

假设我们正在开发一个在线商城，需要设计一个商品列表页面。该页面包含一个搜索框、一个商品列表和一个分页器。

搭建 UI 架构

首先，我们需要定义一个名为 App.vue 的组件，作为页面的根组件。在 App.vue 中，我们使用 Setup 函数来定义组件的数据、计算属性和方法。

<template>
  <div class="container">
    <SearchBar v-model="searchQuery" />
    <ProductList :products="filteredProducts" />
    <Paginator :total="totalProducts" @change="pageChanged" />
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';
import SearchBar from './SearchBar.vue';
import ProductList from './ProductList.vue';
import Paginator from './Paginator.vue';

export default {
  components: {
    SearchBar,
    ProductList,
    Paginator,
  },
  setup() {
    const searchQuery = ref('');
    const products = ref([]);
    const totalProducts = ref(0);

    const filteredProducts = computed(() => {
      // 过滤产品列表
    });

    const pageChanged = (page) => {
      // 加载新的一页数据
    };

    watch(searchQuery, (newQuery) => {
      // 重新加载数据
    });

    // 获取初始数据
    fetchProducts();

    return {
      searchQuery,
      products,
      totalProducts,
      filteredProducts,
      pageChanged,
    };
  },
};
</script>