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 应用。
