关于Vue 3 Composition API的实战技巧

内容分享1个月前发布 THE-BIRDS群鳥

0 0 0

为什么Composition API成为Vue 3开发的必备技能

Vue 2的Options API把代码拆成data、methods、computed等选项，写小组件还行，一旦组件超过500行，找个相关逻辑能把人绕晕！mixins复用逻辑又容易命名冲突，简直是大型项目的噩梦。

Composition API三大革命性改善：

逻辑聚合：把分散的相关逻辑打包成独立函数
原生TS支持：不用写一堆类型声明，TS自动推导
轻量复用：组合函数替代mixins，解决命名冲突

Vue 3.5响应式性能优化30%，配合<script setup>语法，生产包体积小20%！接下来这10个实战技巧，带你从入门到精通

1. 核心API深度解析：构建响应式系统的基石

1.1 ref与reactive：响应式数据的双引擎 ⚙️

基础类型用ref，复杂对象用reactive：

// ref声明基础类型（数字/字符串等）
const count = ref(0);
count.value++; // JS里要加.value，模板里不用

// reactive声明对象/数组
const user = reactive({ name: 'Vue', age: 3 });
user.age++; // 直接改属性

⚠️ 新手必踩坑：别在reactive里嵌套ref！

// 错误示范！
const state = reactive({ count: ref(0) });

// 正确做法
const count = ref(0);
const state = reactive({ count });

1.2 computed与watch：数据处理黄金搭档 ⏱️

关于Vue 3 Composition API的实战技巧

computed适合做计算（有缓存），watch适合处理副作用（调接口）：

// 计算属性：购物车总价（自动缓存）
const totalPrice = computed(() => price.value * quantity.value);

// 监听器：ID变了就重新请求数据
watch(id, (newId) => fetchData(newId), { immediate: true });

2. 实战技巧：打造可复用的组合式逻辑

2.1 自定义组合函数：逻辑复用的最佳实践 ️

以use开头命名的函数，把重复逻辑打包：

// composables/useFetch.js
export function useFetch(url) {
  const data = ref(null);
  const loading = ref(false);
  
  const fetchData = async () => {
    loading.value = true;
    data.value = await fetch(url).then(res => res.json());
    loading.value = false;
  };
  
  onMounted(fetchData);
  return { data, loading, fetchData };
}

组件里用：

const { data: userList, loading } = useFetch('/api/users');

2.2 provide与inject：跨组件传值神器

关于Vue 3 Composition API的实战技巧

祖孙组件传值不用一层层props：

// 父组件提供数据
const theme = ref('dark');
provide('theme', theme);

// 深层子组件直接用
const theme = inject('theme');

3. 性能优化：让应用飞起来

3.1 浅层响应式：shallowRef与shallowReactive

处理十万级数据用浅层响应式，内存占用减少40%：

// 只监听顶层变化
const bigData = shallowReactive({ items: [...100000条数据...] });

3.2 跳过响应式：markRaw拯救第三方库

引入ECharts等库时用markRaw跳过响应式：

const chart = ref(markRaw(echarts.init(dom)));

4. 状态管理新选择：Pinia真香定律

关于Vue 3 Composition API的实战技巧

Vuex平替，直接改状态，TS支持好：

// stores/cart.js
export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  getters: { total: (state) => state.items.reduce((s,i)=>s+i.price,0) },
  actions: { addItem(item) { this.items.push(item); } }
})

组件里用：

const cart = useCartStore();
cart.addItem({ id: 1, price: 99 });

5. Vue 3.5新特性：这些升级太香了！ ✨

5.1 Props解构不丢响应式

3.5直接解构带默认值：

const { count = 0, msg = 'hello' } = defineProps({
  count: Number,
  msg: String
})

5.2 useId：解决SSR ID冲突

自动生成唯一ID，表单元素必备：

<script setup>
const id = useId(); // 生成唯一ID
</script>
<template>
  <label :for="id">用户名：</label>
  <input :id="id" />
</template>

6. 避坑指南：这些错误别再犯 ❌

6.1 解构Props后数据不响应？

// 3.5前
const { name } = toRefs(props);

// 3.5+直接解构
const { name } = defineProps({ name: String });

6.2 组件销毁了定时器还在跑？

setup() {
  const timer = setInterval(() => {}, 1000);
  onUnmounted(() => clearInterval(timer)); // 组件卸载时清除
}

7. 企业级最佳实践

7.1 组合函数目录结构：

src/
├── composables/       # 所有组合函数
│   ├── useApi.js      # 接口请求
│   └── useForm.js     # 表单处理
├── components/        # 组件
└── stores/            # Pinia状态