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