Vue 3 组合式 API 实战：打造可复用的逻辑

时间：2026年08月12日 04:31:30 浏览：0

为什么选择组合式 API？

在 Vue 2 中，Options API 将数据、方法、计算属性分散在不同区域，当组件复杂时难以维护。组合式 API 允许按逻辑关注点组织代码。

基本示例

<script setup>

import { ref, onMounted } from 'vue'



const count = ref(0)

const increment = () => count.value++



onMounted(() => {

  console.log('组件已挂载')

})

</script>

抽取可复用逻辑（Composables）

// useCounter.js

import { ref } from 'vue'

export function useCounter(initial = 0) {

  const count = ref(initial)

  const increment = () => count.value++

  const decrement = () => count.value--

  return { count, increment, decrement }

}

在组件中使用：

<script setup>

import { useCounter } from './useCounter'

const { count, increment } = useCounter(10)

</script>

组合式 API 让逻辑复用和代码组织变得更加清晰，是 Vue 3 的核心进化方向。