Vue 3 发布后,开发模式发生了很大变化。组合式 API 让逻辑复用变得更简单,但同时也带来了一些新习惯需要适应。下面这 10 点是我日常开发中最常踩坑也最受益的地方,整理出来供参考。
1. 响应式数据管理:ref 与 reactive
Vue 3 的响应式系统核心在于 ref 和 reactive。ref 适合基本类型,返回一个包含 .value 的对象;reactive 则针对对象或数组,直接代理原数据。
import { ref, reactive } from 'vue';
// 基本类型用 ref
const count = ref(0);
console.log(count.value); // 0
// 复杂对象用 reactive
const state = reactive({
name: 'Vue 3',
version: '3.2.0',
});
console.log(state.name); // Vue 3
注意:在模板中访问 ref 时不需要 .value,但在 script 中必须显式获取。reactive 不能用于基本类型,否则会被自动包装成 ref。
2. 组合式 API (Composition API)
相比选项式 API,组合式 API 允许将相关逻辑组织在一起,而不是分散在 data、methods 里。通过 setup 函数,我们可以更灵活地管理组件状态。
import { ref, computed } from 'vue';
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
() {
count.++;
}
{ count, doubleCount, increment };
},
};


