vue3组件化开发优势劣势分析，及一个案例

Vue 3 组件化开发的优势和劣势

优势

可复用性：

组件可以重复使用，减少代码冗余，提高开发效率。

可以在不同的项目中复用组件，提升开发速度。

可维护性：

组件化开发使得代码结构清晰，易于维护。

每个组件独立，修改一个组件不会影响其他组件。

模块化：

组件化开发符合模块化编程思想，便于团队协作。

每个组件可以独立开发和测试，提高开发效率。

灵活性：

Vue 3 提供了 Composition API 和 script setup 语法，使得逻辑组织和复用更加灵活。

可以根据需求选择 Options API 或 Composition API。

性能优化：

Vue 3 的响应式系统和虚拟 DOM 优化了性能，组件化开发可以更好地利用这些优化。

劣势

学习曲线：

对于新手来说，理解组件化开发和 Vue 3 的新特性（如 Composition API 和 script setup）可能需要一些时间。

复杂性：

在大型项目中，组件数量可能会非常多，管理这些组件和它们之间的通信可能会变得复杂。

过度抽象：

如果过度使用组件化，可能会导致代码过于抽象，增加理解和维护的难度。

案例：使用 script setup 实现一个简单的 TodoList

项目结构

src/
│
├── components/
│   ├── TodoList.vue
│   ├── TodoItem.vue
│   └── AddTodo.vue
│
├── App.vue
└── main.js

1. TodoItem.vue - 单个任务项组件

<template>
  <li>
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <button @click="toggleComplete">Toggle</button>
    <button @click="deleteTodo">Delete</button>
  </li>
</template>

<script setup>
const props = defineProps({
  todo: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(['toggle-complete', 'delete-todo']);

const toggleComplete = () => {
  emit('toggle-complete', props.todo.id);
};

const deleteTodo = () => {
  emit('delete-todo', props.todo.id);
};
</script>

<style scoped>
li {
  list-style: none;
  margin: 10px 0;
}

button {
  margin-left: 10px;
}

.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

2. TodoList.vue - 任务列表组件

<template>
  <ul>
    <TodoItem
      v-for="todo in todos"
      :key="todo.id"
      :todo="todo"
      @toggle-complete="handleToggleComplete"
      @delete-todo="handleDeleteTodo"
    />
  </ul>
</template>

<script setup>
import TodoItem from './TodoItem.vue';

const props = defineProps({
  todos: {
    type: Array,
    required: true,
  },
});

const emit = defineEmits(['toggle-complete', 'delete-todo']);

const handleToggleComplete = (todoId) => {
  emit('toggle-complete', todoId);
};

const handleDeleteTodo = (todoId) => {
  emit('delete-todo', todoId);
};
</script>

<style scoped>
ul {
  padding: 0;
}
</style>

3. AddTodo.vue - 添加任务组件

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task" />
    <button @click="addTodo">Add</button>
  </div>
</template>

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

const newTodo = ref('');

const emit = defineEmits(['add-todo']);

const addTodo = () => {
  if (newTodo.value.trim()) {
    emit('add-todo', newTodo.value);
    newTodo.value = '';
  }
};
</script>

<style scoped>
input {
  margin-right: 10px;
}
</style>

4. App.vue - 主组件

<template>
  <div id="app">
    <h1>Todo List</h1>
    <AddTodo @add-todo="handleAddTodo" />
    <TodoList :todos="todos" @toggle-complete="handleToggleComplete" @delete-todo="handleDeleteTodo" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import AddTodo from './components/AddTodo.vue';
import TodoList from './components/TodoList.vue';

const todos = ref([
  { id: 1, text: 'Learn Vue 3', completed: false },
  { id: 2, text: 'Build a project', completed: false },
]);

const handleAddTodo = (newTodoText) => {
  todos.value.push({
    id: todos.value.length + 1,
    text: newTodoText,
    completed: false,
  });
};

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

const handleDeleteTodo = (todoId) => {
  todos.value = todos.value.filter((t) => t.id !== todoId);
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5. main.js - 入口文件

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

运行项目

在项目根目录下运行以下命令来启动开发服务器：

npm run serve

总结

使用 script setup 语法更简洁地编写 Vue 3 组件，减少样板代码。

组件化开发使得代码结构清晰，易于维护和扩展。

这个案例展示了如何使用 Vue 3 的响应式系统和组件化开发模式构建一个功能完整的 TodoList 应用。