Vue3使用组合式API实现代码的逻辑复用_Vue.js

引言

在 vue 3 的生态中，组合式 api（composition api）引入了全新的方式来构建组件，使得逻辑复用变得更加简单和灵活。在传统的选项api中，逻辑复用通常依赖于混入（mixins）和高阶组件（hocs），并且这两者在某种程度上可能导致代码的复杂性及可读性问题。而组合式 api 通过函数的方式，使得逻辑复用变得更加明确且易于管理。

本文将通过示例，带你了解如何在 vue 3 中使用组合式 api 来实现代码的逻辑复用。

什么是组合式 api？

组合式 api 是 vue 3 中引入的一种新特性，它允许开发者使用 javascript 函数组织代码，将逻辑捆绑起来，从而提高可读性和可重用性。通过 setup 函数，开发者可以使用 ref 和 reactive 创建响应式数据、使用 computed 来计算属性，并使用组合函数来复用逻辑。

以下是一个简单的组合式 api 示例，加深我们对它的理解：

<template>
  <div>
    <h1>{{ count }}</h1>
    <button @click="increment">increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  }
};
</script>

逻辑复用的方式

组合式 api 提供了一种更自然的方式来复用逻辑，我们可以通过定义组合函数来实现这一目标。

创建组合函数

创建组合函数是实现逻辑复用的核心。组合函数是一个普通的 javascript 函数，它封装了一组相关的响应式状态和行为。以下是一个简单的示例：

// usecounter.js
import { ref } from 'vue';

export function usecounter() {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  const decrement = () => {
    count.value--;
  };
  return { count, increment, decrement };
}

在上面的例子中，我们创建了一个名为 usecounter 的组合函数，它实现了一个简单的计数器逻辑，包括状态 count 和两个方法 increment 和 decrement。

在组件中使用组合函数

现在我们可以在组件中使用这个组合函数来重用逻辑：

<template>
  <div>
    <h1>counter 1: {{ counter1.count }}</h1>
    <button @click="counter1.increment">increment counter 1</button>
    <h1>counter 2: {{ counter2.count }}</h1>
    <button @click="counter2.increment">increment counter 2</button>
  </div>
</template>

<script>
import { usecounter } from './usecounter';

export default {
  setup() {
    const counter1 = usecounter();
    const counter2 = usecounter();
    
    return { counter1, counter2 };
  }
};
</script>

在这个例子中，我们在同一个组件中使用了 usecounter 两次，分别创建了 counter1 和 counter2，它们都是独立的计数器，互不影响。通过这样的方式，我们实现了逻辑的复用而不显著增加代码复杂性。

组合多个组合函数

有时候，逻辑复用可能涉及到多个组合函数的结合。以下是一个更复杂的案例，展示如何组合多个逻辑：

<template>
  <div>
    <h1>data: {{ fetchdata.data }}</h1>
    <button @click="fetchdata.loading">fetch data</button>
    <h1>counter: {{ counter.count }}</h1>
    <button @click="counter.increment">increment</button>
  </div>
</template>

<script>
import { usecounter } from './usecounter';
import { usefetch } from './usefetch';

export default {
  setup() {
    const counter = usecounter();
    const fetchdata = usefetch('https://api.example.com/data');

    return { counter, fetchdata };
  }
};
</script>

在这个例子中，usecounter 和 usefetch 函数组合在一起，共同构建了一个组件。这样，逻辑复用得到了极大的提升，组件的行为变得清晰且易于维护。