Vue3组合式API：实战构建TodoList组件库

Vue3组合式API实战：从零构建可复用的TodoList组件库

Vue3的组合式API（Composition API）为组件开发带来了更灵活、更强大的组织方式。通过它，我们可以轻松构建可复用的TodoList组件库，让代码既简洁又高效。下面，我们将一步步探索如何实现这一目标。

1. 理解组合式API的优势

组合式API的核心优势在于将相关逻辑组织在一起，而不是分散在data、methods、computed等选项中。这种方式更接近JavaScript原生逻辑，便于复用和维护。对于TodoList这样的常见组件，组合式API能帮助我们更好地管理状态和逻辑。

2. 构建基础TodoList组件

首先，创建一个基础的TodoList组件。使用ref来管理任务列表和输入框的状态，用methods处理添加、删除和标记完成的功能：

const { ref } = Vue

const TodoList = {
  setup() {
    const todos = ref([])
    const newTodo = ref(\'\')

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({
          id: Date.now(),
          text: newTodo.value,
          completed: false
        })
        newTodo.value = \'\'
      }
    }

    const removeTodo = (id) => {
      todos.value = todos.value.filter(todo => todo.id !== id)
    }

    const toggleTodo = (id) => {
      const todo = todos.value.find(t => t.id === id)
      if (todo) {
        todo.completed = !todo.completed
      }
    }

    return {
      todos,
      newTodo,
      addTodo,
      removeTodo,
      toggleTodo
    }
  }
}

3. 实现可复用设计

为了让TodoList更具复用性，我们可以将状态和逻辑提取到一个自定义组合函数中。这样，其他组件也能轻松复用这些逻辑：

const useTodos = () => {
  const todos = ref([])
  const newTodo = ref(\'\')

  const addTodo = () => {
    if (newTodo.value.trim()) {
      todos.value.push({
        id: Date.now(),
        text: newTodo.value,
        completed: false
      })
      newTodo.value = \'\'
    }
  }

  const removeTodo = (id) => {
    todos.value = todos.value.filter(todo => todo.id !== id)
  }

  const toggleTodo = (id) => {
    const todo = todos.value.find(t => t.id === id)
    if (todo) {
      todo.completed = !todo.completed
    }
  }

  return {
    todos,
    newTodo,
    addTodo,
    removeTodo,
    toggleTodo
  }
}

4. 添加高级功能

为了提升组件库的实用性，我们可以添加过滤和排序功能。例如，支持按\”全部\”、\”已完成\”、\”未完成\”三种状态显示任务：

• 使用computed属性计算过滤后的任务列表
• 提供切换视图的按钮组
• 添加任务统计功能

5. 打包与发布

最后，将组件库打包并发布到npm，方便其他项目使用。Vue3的单文件组件（SFC）格式使得组件的导入和导出非常简单。通过配置适当的构建工具，可以轻松生成生产环境的代码。

通过组合式API构建TodoList组件库，不仅代码结构更清晰，而且复用性大大提升。这种开发模式不仅适用于TodoList，还能扩展到更复杂的场景，让Vue3的开发体验更加愉快。