10.3 组合式API的应用 -TypeScript和Vue从入门到精通(三)

当前位置:　首页>> 技术小册>> TypeScript和Vue从入门到精通(三)

10.3 组合式API的应用

在Vue 3中，组合式API（Composition API）的引入是一次重大的架构革新，它提供了一种更为灵活和强大的方式来组织和重用逻辑。与Vue 2中的Options API相比，组合式API允许开发者将组件的逻辑按照功能组织起来，而不是分散在多个选项（如data、methods、computed等）中。这种方式不仅提高了代码的可读性和可维护性，还使得在大型项目中管理和复用逻辑变得更加容易。本章将深入探讨组合式API的应用，包括其基本概念、核心API的使用、以及如何在实际项目中高效地利用它们。

10.3.1 组合式API基础

1. 引入与设置

组合式API主要通过setup()函数来访问和使用。setup()函数是Vue 3中新增的一个组件选项，它是所有组合式API调用的入口点。在setup()中，你可以定义响应式状态、计算属性、方法以及生命周期钩子等。重要的是，setup()函数在组件被创建之前调用，并且它接收两个参数：props和context（一个普通JavaScript对象，包含attrs、slots、emit等）。

2. 响应式状态

在组合式API中，你可以使用reactive和ref来创建响应式状态。reactive用于创建一个响应式的对象，而ref则用于基本数据类型的响应式引用。两者都是Vue 3的响应式系统的一部分，确保当数据变化时，视图能够自动更新。

import { reactive, ref } from 'vue';
export default {
  setup() {
    const state = reactive({ count: 0 });
    const message = ref<string>('Hello Vue 3!');
    // 修改状态
    function increment() {
      state.count++;
    }
    // 访问响应式引用
    function getMessage() {
      console.log(message.value);
    }
    return { state, message, increment, getMessage };
  },
};

3. 计算属性和监视器

组合式API提供了computed和watch/watchEffect来分别处理计算属性和侦听器。computed用于声明计算属性，它基于响应式数据自动更新。watch和watchEffect则用于侦听数据变化并执行副作用。

import { computed, watch, watchEffect, ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    // 计算属性
    const doubleCount = computed(() => count.value * 2);
    // 立即运行一次，然后侦听count变化
    watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });
    // 显式侦听count变化
    watch(count, (newVal, oldVal) => {
      console.log(`count changed from ${oldVal} to ${newVal}`);
    });
    return { count, doubleCount };
  },
};

10.3.2 组合式API的高级应用

1. 使用setup()与TypeScript

TypeScript与Vue 3的组合式API结合使用时，可以提供类型安全和更丰富的开发体验。通过TypeScript，你可以为响应式状态、计算属性、方法等提供类型注解，从而在开发过程中获得更准确的错误检查和提示。

import { reactive, ref, computed } from 'vue';
export default {
  setup() {
    const state = reactive<{ count: number; message: string }>({
      count: 0,
      message: 'Hello TypeScript!',
    });
    const doubleCount = computed<number>(() => state.count * 2);
    function updateMessage(newMessage: string) {
      state.message = newMessage;
    }
    return { state, doubleCount, updateMessage };
  },
};

2. 组件逻辑复用

组合式API的一个显著优势是它能够更容易地实现逻辑复用。你可以将可复用的逻辑封装成可重用的函数，然后在多个组件中导入和使用这些函数。这有助于减少代码重复，提高项目的可维护性。

// useCounter.ts
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  const increment = () => count.value++;
  const decrement = () => count.value--;
  return { count, increment, decrement };
}
// 组件中使用
import { useCounter } from './useCounter';
export default {
  setup() {
    const { count, increment, decrement } = useCounter();
    return { count, increment, decrement };
  },
};

3. 跨组件通信与Provide/Inject

虽然组合式API本身不直接提供跨组件通信的API，但你可以结合provide和inject选项来实现。provide和inject允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起始组件和注入组件之间建立起响应式连接。

// 祖先组件
import { provide, ref } from 'vue';
export default {
  setup() {
    const theme = ref('dark');
    provide('theme', theme);
    return { theme };
  },
};
// 子孙组件
import { inject } from 'vue';
export default {
  setup() {
    const theme = inject<string>('theme')!;
    return { theme };
  },
};

10.3.3 实战案例分析

假设我们正在开发一个待办事项应用，每个待办事项可以拥有标题、描述和完成状态。我们可以使用组合式API来设计这个组件，使其更加模块化和可维护。

1. 定义待办事项的数据结构

首先，我们定义一个TodoItem接口来规范待办事项的数据结构。

interface TodoItem {
  id: number;
  title: string;
  description: string;
  completed: boolean;
}

2. 创建待办事项的响应式状态

然后，在组件的setup()函数中，我们使用reactive来创建一个响应式的待办事项列表。

import { reactive } from 'vue';
export default {
  setup() {
    const todos = reactive<TodoItem[]>([
      { id: 1, title: 'Learn TypeScript', description: 'Understand types and interfaces', completed: false },
      // 更多待办事项...
    ]);
    // 添加待办事项的方法
    function addTodo(title: string, description: string) {
      const newId = todos.length + 1;
      todos.push({ id: newId, title, description, completed: false });
    }
    // 切换待办事项的完成状态
    function toggleCompletion(id: number) {
      const todo = todos.find(todo => todo.id === id);
      if (todo) {
        todo.completed = !todo.completed;
      }
    }
    return { todos, addTodo, toggleCompletion };
  },
};

3. 在模板中使用组合式API

最后，在组件的模板中，我们可以遍历todos数组，渲染每个待办事项，并添加按钮来添加新待办事项或切换完成状态。

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" :checked="todo.completed" @change="toggleCompletion(todo.id)">
      {{ todo.title }} - {{ todo.description }}
    </li>
  </ul>
  <button @click="addTodo('New Todo', 'Description here')">Add Todo</button>
</template>

通过上述例子，我们展示了如何在Vue 3中使用组合式API来构建一个简单的待办事项应用。组合式API不仅提高了代码的可读性和可维护性，还使得逻辑复用和跨组件通信变得更加容易。随着你对组合式API的深入理解，你将能够更高效地构建出更复杂、更健壮的Vue应用。