Composition API 是 Vue3 最具革命性的特性。它不仅仅是一种新的写法,更是一种全新的代码组织和复用方式。本文将深入探讨 Composition API 的方方面面,帮你掌握这一强大工具。
为什么需要 Composition API?
Options API 的痛点
// Options API:相关逻辑被强制分散
export default {
data() {
return {
// 功能 A 的数据
userList: [],
userLoading: false,
// 功能 B 的数据
searchQuery: "",
searchResults: [],
};
},
computed: {
// 功能 A 的计算属性
activeUsers() {
/* ... */
},
// 功能 B 的计算属性
filteredResults() {
/* ... */
},
},
methods: {
// 功能 A 的方法
fetchUsers() {
/* ... */
},
deleteUser() {
/* ... */
},
// 功能 B 的方法
search() {
/* ... */
},
clearSearch() {
/* ... */
},
},
mounted() {
// 功能 A 的初始化
this.fetchUsers();
// 功能 B 的初始化
this.initSearch();
},
};
2026/3/20大约 8 分钟