超越Composition API：高效重用逻辑助力Vue3项目成功

前端

2024-01-22 17:55:44

Vue.js 3.0 中的 Composition API 是一项变革性功能，它彻底改变了我们在 Vue.js 中编写代码的方式。Composition API 允许我们以一种更加模块化和可重用的方式编写组件，这对于大型项目尤其有用。

但是，随着我们使用 Composition API 编写越来越多的代码，我们可能会发现自己面临一个问题：如何在不同的组件之间共享逻辑。乍一看，这似乎很容易，但实际上，要编写出可重用且模块化的代码需要一些技巧。

在本文中，我们将探讨如何在 Vue.js 3.0 的 Composition API 中提取和重用逻辑。我们将介绍几种不同的技术，包括：

逻辑组件
抽取函数
状态提升

我们将通过示例代码来演示这些技术是如何工作的，以便您能够在自己的项目中使用它们。

逻辑组件

逻辑组件是一种将逻辑与组件的模板和样式分离开来的组件。这使得我们能够更轻松地共享逻辑，而无需复制和粘贴代码。

例如，我们可能有一个组件，它包含一个列表和一个表单。表单用于向列表中添加新项。我们可以将列表和表单逻辑提取到一个单独的逻辑组件中，然后在需要的地方使用它。

<!-- App.vue -->
<template>
  <div>
    <todo-list :todos="todos" @add-todo="addTodo" />
    <todo-form @add-todo="addTodo" />
  </div>
</template>

<script>
import TodoList from './TodoList.vue'
import TodoForm from './TodoForm.vue'

export default {
  components: {
    TodoList,
    TodoForm
  },
  data() {
    return {
      todos: []
    }
  },
  methods: {
    addTodo(todo) {
      this.todos.push(todo)
    }
  }
}
</script>

<!-- TodoList.vue -->
<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
  </ul>
</template>

<script>
export default {
  props: ['todos'],
  emits: ['add-todo']
}
</script>

<!-- TodoForm.vue -->
<template>
  <form @submit.prevent="addTodo">
    <input type="text" v-model="todoText">
    <button type="submit">Add</button>
  </form>
</template>

<script>
export default {
  emits: ['add-todo'],
  data() {
    return {
      todoText: ''
    }
  },
  methods: {
    addTodo() {
      this.$emit('add-todo', {
        text: this.todoText
      })
      this.todoText = ''
    }
  }
}
</script>

在上面的示例中，TodoList 和 TodoForm 都是逻辑组件。它们包含了列表和表单的逻辑，而 App.vue 组件则负责将它们组合在一起。

抽取函数

另一种共享逻辑的方法是将函数提取到一个单独的文件中。这使得我们可以更轻松地在不同的组件中重用这些函数。

例如，我们可能有一个函数，它用于格式化日期。我们可以将这个函数提取到一个单独的文件中，然后在需要的地方使用它。

// formatDate.js
export default function formatDate(date) {
  return date.toLocaleDateString()
}

<!-- App.vue -->
<template>
  <div>
    <p>{{ date | formatDate }}</p>
  </div>
</template>

<script>
import formatDate from './formatDate.js'

export default {
  filters: {
    formatDate
  }
}
</script>

在上面的示例中，我们将 formatDate 函数提取到了一个单独的文件中。然后，我们在 App.vue 组件中使用它来格式化日期。

状态提升

状态提升是一种将状态从子组件提升到父组件的技术。这使得我们可以更轻松地在多个组件之间共享状态。

例如，我们可能有一个组件，它包含一个计数器。我们可以将计数器状态提升到父组件，然后在父组件中使用它。

<!-- App.vue -->
<template>
  <div>
    <counter :count="count" @increment="incrementCount" />
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  components: {
    Counter
  },
  data() {
    return {
      count: 0
    }
  },
  methods: {
    incrementCount() {
      this.count++
    }
  }
}
</script>

<!-- Counter.vue -->
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementCount">Increment</button>
  </div>
</template>

<script>
export default {
  props: ['count'],
  emits: ['increment'],
  methods: {
    incrementCount() {
      this.$emit('increment')
    }
  }
}
</script>