Vue 3中的组合式函数（Composition API）极大地提升了代码的可读性和重用性。它通过使用 reactive、ref 等特性将组件的逻辑组织成函数，避免了选项式API中常见的“代码混乱”的问题。通过以下13个技巧，你能够更加高效地使用组合式API，提升Vue代码质量和可读性。
一、使用 reactive代替 data
组合式API中的 reactive是一个响应式对象，它让我们可以轻松地管理组件的状态。相比于选项式API的 data，reactive使得状态变得更加直观和易于管理。
示例：
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue'
});
return { state };
}
}使用 reactive，状态对象会变成响应式，任何属性的变动都会触发组件的更新。
二、避免过多的 ref嵌套
在组合式API中，ref通常用于基本数据类型的响应式绑定。当遇到较复杂的对象时，使用 reactive会更加高效，而不是将每个属性都用 ref包裹。
示例：
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue'
});
return { state };
}
}在这种情况下，使用 reactive代替 ref更加简洁且易于管理。
三、利用 computed优化计算属性
computed是Vue的计算属性，它用于基于响应式数据的变化来计算值。通过 computed，我们可以避免不必要的函数调用，提高性能。
示例：
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
const doubleCount = computed(() => state.count * 2);
return { state, doubleCount };
}
}通过 computed，doubleCount会根据 state.count的变化自动更新，避免了每次渲染时重复计算。
四、使用 watch监听数据变化
watch可以用来监听响应式数据的变化，并在数据发生变化时执行特定的操作。它能够帮助我们进行副作用处理。
示例：
import { reactive, watch } from 'vue';
export default {
setup() {
const state = reactive({
count: 0
});
watch(() => state.count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
return { state };
}
}这种方式能够在 count变化时执行某些副作用，比如发送请求或进行日志记录。
五、合理使用 provide和 inject
当你需要在组件树中传递数据时，provide和 inject可以非常方便地实现跨层级的数据传递。它们避免了通过多层 props和 $emit传递数据的复杂性。
示例：
// 父组件
import { provide, reactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
provide('state', state);
return { state };
}
}
// 子组件
import { inject } from 'vue';
export default {
setup() {
const state = inject('state');
return { state };
}
}通过 provide和 inject，可以避免层层传递 props，让数据流动更加简洁。
六、使用 toRefs提升响应性
当我们使用 reactive来创建响应式对象时，如果将这个对象传递给子组件，通常会丢失响应性。为了保持响应性，toRefs可以将对象中的每个属性转换为 ref。
示例：
import { reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({
count: 0,
name: 'Vue'
});
return { ...toRefs(state) }; // 将state的属性转为ref
}
}这样，count和 name在子组件中都可以保持响应性。
七、使用组合函数提高重用性
组合式API的优势之一就是将逻辑提取为组合函数，这样可以轻松地在多个组件之间重用。
示例：
import { ref } from 'vue';
function useCounter() {
const count = ref(0);
const increment = () => count.value++;
return { count, increment };
}
export default {
setup() {
const { count, increment } = useCounter();
return { count, increment };
}
}通过 useCounter函数，我们将计数器的逻辑封装起来，并且能够在多个组件中共享。
八、避免在 setup中进行副作用操作
setup是组件初始化的地方，应尽量避免在其中执行副作用操作（例如API请求、事件监听等）。这些操作应通过 onMounted等生命周期钩子来处理。
示例：
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
// 执行副作用操作，如API请求
console.log('Component mounted!');
});
}
}这样能够避免在 setup中做过多不必要的操作，保持函数的纯粹性。
九、使用 ref绑定DOM元素
在组合式API中，ref不仅用于响应式数据，还可以用于获取DOM元素的引用。这可以方便我们直接操作DOM。
示例：
import { ref, onMounted } from 'vue';
export default {
setup() {
const inputRef = ref(null);
onMounted(() => {
inputRef.value.focus(); // 聚焦到输入框
});
return { inputRef };
}
}这种方式使得我们可以通过 inputRef直接操作DOM元素。
十、避免过多的 watch监听
watch是一个强大的工具，但过度使用可能会导致性能问题。需要尽量减少 watch的使用，并确保它们只用于必要的情况。
十一、使用 defineEmits和 defineProps简化 props和 emit
组合式API为 props和 emit提供了更加简洁的定义方式，使用 defineProps和 defineEmits可以减少冗余代码。
示例：
const props = defineProps({
msg: String
});
const emit = defineEmits();十二、使用 reactive代替 ref进行复杂数据的响应式管理
对于较为复杂的数据结构，使用 reactive管理响应式数据比 ref更加方便。
十三、使用 async setup处理异步逻辑
如果需要在 setup中处理异步操作，可以使用 async setup来处理。这样能让组件的初始化更具可读性。
示例：
export default {
async setup() {
const data = await fetchData();
return { data };
}
}总结
通过这些技巧，结合Vue 3的组合式API，开发者可以在生产环境中编写更高效、更简洁的代码。提升代码质量和可读性不仅能减少维护成本，还能使项目的扩展变得更加方便。