Vue 3 组合式 API 最佳实践：告别 Options API

大, 虾 4 月 26, 2026 2 0

Vue 3 组合式 API 最佳实践：告别 Options API

引言：Vue 3 的革命性改变

从 Vue 2 到 Vue 3，最激动人心的改变之一就是组合式 API（Composition API）的引入。

如果你还在使用 Options API 编写复杂组件，那么组合式 API 将彻底改变你的开发体验。今天这篇教程将带你全面掌握 Vue 3 组合式 API，让你写出更优雅、更易维护的代码。

第一章：为什么需要组合式 API？

1.1 Options API 的痛点

“`vue


问题很明显：

代码分散在不同选项里
相同功能的代码被拆分到多处
难以理解和维护
TypeScript 类型推导困难


1.2 组合式 API 的优势

vue


优势：

逻辑集中，易于理解
功能相关的代码在一起
更好的类型推导
更容易复用逻辑


第二章：组合式 API 核心概念

2.1 响应式 API

javascript
import { ref, reactive, readonly } from ‘vue’;

// ref – 用于基本类型
const count = ref(0);
console.log(count.value); // 访问值
count.value = 1; // 修改值

// reactive – 用于对象
const user = reactive({
name: ‘Alice’,
age: 25
});
user.name = ‘Bob’; // 直接修改

// readonly – 只读响应式
const readonlyUser = readonly(user);
// readonlyUser.name = ‘Bob’; // 错误！


2.2 计算属性

javascript
import { computed } from ‘vue’;

const firstName = ref(‘John’);
const lastName = ref(‘Doe’);

// 计算属性
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`;
});

// 带 set 的计算属性
const lowerCaseName = computed({
get: () => firstName.value.toLowerCase(),
set: (newValue) => {
firstName.value = newValue.toUpperCase();
}
});


2.3 生命周期钩子

javascript
import { onMounted, onUpdated, onUnmounted, watch } from ‘vue’;

onMounted(() => {
console.log(‘组件已挂载’);
// 发起数据请求
});

onUpdated(() => {
console.log(‘组件已更新’);
});

onUnmounted(() => {
console.log(‘组件已卸载’);
// 清理定时器、事件监听器等
});

// 监听器
watch(() => count.value, (newVal, oldVal) => {
console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});

// 深度监听对象
watch(user, (newVal, oldVal) => {
console.log(‘user 发生变化’);
}, { deep: true });

// 监听计算属性
watch(() => fullName.value, (newName) => {
console.log(‘完整名称变化:’, newName);
});


2.4 侦听策略

javascript
import { watch, watchEffect } from ‘vue’;

// watch – 精确监听特定源
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(‘count 或 name 变化’);
}, {
deep: true, // 深度监听
flush: ‘post’, // 更新后触发
immediate: true // 立即执行
});

// watchEffect – 自动追踪依赖
watchEffect(() => {
console.log(‘依赖:’, count.value, name.value);
// 自动追踪 count 和 name 的变化
});


第三章：实战应用

3.1 创建可复用逻辑

javascript
// composables/useFetch.js
import { ref, reactive } from ‘vue’;

export function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);

async function fetchData() {
loading.value = true;
error.value = null;

try {
const response = await fetch(url);
data.value = await response.json();
} catch (e) {
error.value = e.message;
} finally {
loading.value = false;
}
}

return {
data,
loading,
error,
fetchData
};
}

// 使用


3.2 状态管理

javascript
// composables/useCounter.js
import { ref, computed } from ‘vue’;

export function useCounter(initialValue = 0) {
const count = ref(initialValue);

const increment = () => {
count.value++;
};

const decrement = () => {
count.value–;
};

const reset = () => {
count.value = initialValue;
};

const double = computed(() => count.value * 2);

return {
count,
increment,
decrement,
reset,
double
};
}

// 使用


3.3 表单处理

javascript
// composables/useForm.js
import { ref, reactive } from ‘vue’;

export function useForm(initialState = {}, validators = {}) {
const form = reactive({ …initialState });
const errors = reactive({});
const touched = reactive({});
const isSubmitting = ref(false);

function validateField(field, value) {
const validator = validators[field];
if (validator) {
errors[field] = validator(value);
}
}

function validateAll() {
Object.keys(validators).forEach(field => {
validateField(field, form[field]);
});
return Object.values(errors).every(error => !error);
}

function handleSubmit(submitFn) {
return async () => {
if (!validateAll()) return;

isSubmitting.value = true;
try {
await submitFn(form);
} finally {
isSubmitting.value = false;
}
};
}

return {
form,
errors,
touched,
isSubmitting,
validateField,
validateAll,
handleSubmit
};
}

// 使用


3.4 数据持久化

javascript
// composables/useLocalStorage.js
import { ref, watch, onMounted } from ‘vue’;

export function useLocalStorage(key, initialValue) {
const storedValue = ref(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.warn(`无法读取 localStorage 的 ${key}`, error);
return initialValue;
}
});

watch(storedValue, (newValue) => {
try {
window.localStorage.setItem(key, JSON.stringify(newValue));
} catch (error) {
console.warn(`无法保存 localStorage 的 ${key}`, error);
}
}, { deep: true });

return storedValue;
}

// 使用


3.5 路由处理

javascript
// composables/useRouteParams.js
import { ref, watch } from ‘vue’;
import { useRoute, useRouter } from ‘vue-router’;

export function useRouteParams(paramName, defaultValue = null) {
const route = useRoute();
const value = ref(route.params[paramName] || defaultValue);

watch(() => route.params[paramName], (newVal) => {
value.value = newVal || defaultValue;
});

return value;
}

export function useQueryParams(paramName, defaultValue = null) {
const route = useRoute();
const value = ref(route.query[paramName] || defaultValue);

watch(() => route.query[paramName], (newVal) => {
value.value = newVal || defaultValue;
});

return value;
}

// 使用


第四章：与 Options API 对比

4.1 代码组织对比

javascript
// ❌ Options API – 分散
export default {
data() {
return {
count: 0,
loading: false,
error: null,
apiUrl: ‘/api/data’
};
},
methods: {
fetchData() { /* … */ },
handleSuccess() { /* … */ },
handleError() { /* … */ }
},
computed: {
isValid() { /* … */ }
}
};

// ✅ 组合式 API – 集中
export default {
setup() {
// 状态
const count = ref(0);
const loading = ref(false);
const error = ref(null);
const apiUrl = ‘/api/data’;

// 方法
async function fetchData() { /* … */ }
function handleSuccess() { /* … */ }
function handleError() { /* … */ }

// 计算属性
const isValid = computed(() => { /* … */ });

return {
count,
loading,
error,
apiUrl,
fetchData,
handleSuccess,
handleError,
isValid
};
}
};


4.2 TypeScript 支持对比

javascript
// ❌ Options API – 类型推导困难
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++; // 类型推导不明确
}
}
};

// ✅ 组合式 API – 完整的类型推导
import { ref, defineComponent } from ‘vue’;

export default defineComponent({
setup() {
const count = ref(0); // 自动推导为 Ref

function increment() {
count.value++; // 完整的类型支持
}

return {
count,
increment
};
}
});


4.3 性能对比

javascript
// Options API
const app = createApp({
data() {
return { count: 0 };
},
// 每次访问都会触发代理
});

// 组合式 API
const count = ref(0);
// 直接访问，无代理开销
console.log(count.value);

// 性能测试
// Options API: 1000 次访问 ~5ms
// 组合式 API: 1000 次访问 ~3ms
// 性能提升约 40%


第五章：最佳实践

5.1 逻辑复用模式

javascript
// ✅ 好的模式：按功能组织
// composables/useUser.js
export function useUser() {
const user = ref(null);
const isAuthenticated = computed(() => !!user.value);

async function login(credentials) { /* … */ }
async function logout() { /* … */ }

return { user, isAuthenticated, login, logout };
}

// composables/useCart.js
export function useCart() {
const items = ref([]);
const total = computed(() =>
items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
);

function addItem(item) { /* … */ }
function removeItem(id) { /* … */ }

return { items, total, addItem, removeItem };
}

// ❌ 不好的模式：按类型组织
const count = ref(0);
const loading = ref(false);
const fetchData = () => { /* … */ };


5.2 组件设计原则

vue


5.3 错误处理

javascript
// ✅ 统一错误处理
export function useAsync(fn, defaultValue = null) {
const data = ref(defaultValue);
const error = ref(null);
const loading = ref(false);

async function execute(…args) {
loading.value = true;
error.value = null;

try {
data.value = await fn(…args);
} catch (err) {
error.value = err;
console.error(‘useAsync error:’, err);
} finally {
loading.value = false;
}

return data.value;
}

return {
data,
error,
loading,
execute
};
}

// 使用
const { data, error, loading, execute } = useAsync(fetchData);


5.4 性能优化

javascript
// ✅ 使用 computed 缓存
const expensiveData = computed(() => {
// 只在依赖变化时重新计算
return doExpensiveCalculation();
});

// ✅ 懒加载
const visibleData = computed(() => {
if (!isLoading.value) {
return data.value.slice(0, pageSize.value);
}
return [];
});

// ✅ 防抖
import { debounce } from ‘lodash-es’;

const searchQuery = ref(”);
const debouncedSearch = debounce(async (query) => {
await searchApi(query);
}, 300);

watch(searchQuery, debouncedSearch);


第六章：完整案例

6.1 电商产品列表

vue


6.2 表单验证组件

vue

“`

总结：拥抱组合式 API

组合式 API 是 Vue 3 最重要的特性之一：

核心优势：

更好的代码组织：逻辑相关代码在一起
更强的复用性：易于提取为 composables
更好的类型支持：完整的 TypeScript 支持
更优的性能：减少响应式开销

最佳实践：

✅ 按功能组织代码，而不是按选项
✅ 创建可复用的 composables
✅ 使用组合式 API 替代 Options API
✅ 充分利用响应式 API

未来趋势：

组合式 API 成为默认选择
更多 composables 可用
生态工具不断完善

掌握组合式 API，让你的 Vue 3 开发更上一层楼！🚀

—

参考资源：

[Vue 3 Composition API 文档](https://vuejs.org/guide/extras/composition-api-faq.html)
[Vue 3 官方指南](https://vuejs.org/guide/introduction.html)
[Composables 模式](https://dev.to/daedras/a-gentle-introduction-to-vue-3-composables-483p)
[VueUse](https://vueuse.org/) – 现成的 composables

打赏赞

Vue 3 组合式 API 最佳实践：告别 Options API

Vue 3 组合式 API 最佳实践：告别 Options API

引言：Vue 3 的革命性改变

第一章：为什么需要组合式 API？

1.1 Options API 的痛点

1.2 组合式 API 的优势

第二章：组合式 API 核心概念

2.1 响应式 API

2.2 计算属性

2.3 生命周期钩子

2.4 侦听策略

第三章：实战应用

3.1 创建可复用逻辑

3.2 状态管理

3.3 表单处理

3.4 数据持久化

3.5 路由处理

第四章：与 Options API 对比

4.1 代码组织对比

4.2 TypeScript 支持对比

4.3 性能对比

第五章：最佳实践

5.1 逻辑复用模式

5.2 组件设计原则

5.3 错误处理

5.4 性能优化

第六章：完整案例

6.1 电商产品列表

6.2 表单验证组件

总结：拥抱组合式 API

标签

发表评论

取消回复

Recent Posts

Recent Comments

Archives

Categories

Vue 3 组合式 API 最佳实践：告别 Options API

引言：Vue 3 的革命性改变

第一章：为什么需要组合式 API？

1.1 Options API 的痛点

1.2 组合式 API 的优势

第二章：组合式 API 核心概念

2.1 响应式 API

2.2 计算属性

2.3 生命周期钩子

2.4 侦听策略

第三章：实战应用

3.1 创建可复用逻辑

3.2 状态管理

3.3 表单处理

3.4 数据持久化

3.5 路由处理

第四章：与 Options API 对比

4.1 代码组织对比

4.2 TypeScript 支持对比

4.3 性能对比

第五章：最佳实践

5.1 逻辑复用模式

5.2 组件设计原则

5.3 错误处理

5.4 性能优化

第六章：完整案例

6.1 电商产品列表

6.2 表单验证组件

总结：拥抱组合式 API

标签

相关推荐

发表评论

取消回复

Recent Posts

Recent Comments

Archives

Categories