组合式 API - Vue

01. 组合式 API——把逻辑「组装」起来

Vue 3 最大的变化就是推出了组合式 API（Composition API）。在旧的选项式 API 里，同一个功能的代码散落在 data、methods、computed、watch 各处——功能一多就很难维护。组合式 API 允许你把同一块逻辑写在一起，然后用 setup() 函数「组装」起来。 setup() 是组合式 API 的入口，在组件创建之前执行。在里面定义响应式数据、计算属性、方法，然后 return 出去给模板用。

javascript

// Vue 3 组合式 API
import { ref, reactive, computed, watch, onMounted } from 'vue';

export default {
setup() {
    // 响应式数据
    const count = ref(0);              // 基本类型用 ref
    const user = reactive({            // 对象用 reactive
        name: '张三',
        age: 25
    });

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 方法
    function increment() {
        count.value++;  // ref 需要 .value 访问
    }

    // 侦听器
    watch(count, (newVal, oldVal) => {
        console.log(`count 从 ${oldVal} 变成了 ${newVal}`);
    });

    // 生命周期
    onMounted(() => {
        console.log('组件挂载好了');
    });

    // 返回给模板用的东西
    return { count, user, doubleCount, increment };
}
};

02. ref vs reactive——该用哪个？

ref 和 reactive 都能创建响应式数据，但有细微差别： ref——适合基本类型（字符串、数字、布尔）。在 JS 里访问要 .value，模板里自动解包不用加 .value。也能包对象但内部会转成 reactive。 reactive——适合对象和数组，直接访问属性不用 .value。但不能整体重新赋值（会丢失响应式）。简单记：基本类型用 ref，对象用 reactive。或者偷懒统一用 ref（因为 ref 什么都能包）。

03. 组合函数——逻辑复用的最佳方式

组合式 API 最大的好处是你可以把一段逻辑抽成「组合函数」（composable），在多个组件里复用。就像 React 的自定义 Hook 一样，命名习惯也以 use 开头。

javascript

// composables/useMouse.js——追踪鼠标位置
import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
const x = ref(0);
const y = ref(0);

function update(event) {
    x.value = event.pageX;
    y.value = event.pageY;
}

onMounted(() => window.addEventListener('mousemove', update));
onUnmounted(() => window.removeEventListener('mousemove', update));

return { x, y };
}

// 在组件中使用
import { useMouse } from './composables/useMouse';

export default {
setup() {
    const { x, y } = useMouse();
    return { x, y };
}
};
// 模板里：<p>鼠标位置：{{ x }}, {{ y }}</p>

组合函数命名习惯以 use 开头（useMouse、useFetch），这是 Vue 社区约定，跟 React Hook 的命名习惯一致。

知识测验

第 1/5 题正确 0

Vue 3 中 ref 和 reactive 的主要区别？

Vue Router