13Vue3的三种逻辑复用方式

方式1：组合式函数（Composables）⭐ 最常用

// 1. 创建料理包（useCounter.js）
import { ref } from 'vue'

// 以 use 开头是命名约定
export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  function increment() {
    count.value++
  }
  
  function decrement() {
    count.value--
  }
  
  function reset() {
    count.value = initialValue
  }
  
  // 返回“食材包”
  return { count, increment, decrement, reset }
}

<!-- 2. 使用料理包 -->
<template>
  <div>
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="reset">重置</button>
  </div>
</template>

<script setup>
// 导入料理包，一键获得所有功能
import { useCounter } from './useCounter'

// 像泡方便面一样简单！
const { count, increment, decrement, reset } = useCounter(10)
</script>

优点：

• 真正的函数，最灵活

• 可以传递参数

• 多个组合函数可以嵌套使用

方式2：自定义指令（Directives）

就像给DOM元素添加“超能力”：

// 1. 创建超能力（vFocus.js）
export const vFocus = {
  mounted(el) {
    el.focus() // 自动聚焦
  }
}

<!-- 2. 使用超能力 -->
<template>
  <!-- 输入框自动获得焦点 -->
  <input v-focus placeholder="我会自动聚焦">
</template>

<script setup>
import { vFocus } from './vFocus'
</script>

适合场景：

• 直接操作DOM

• 添加特殊交互效果

• 集成第三方DOM库

方式3：插件（Plugins）

就像给整个Vue应用安装“扩展程序”：

// 1. 创建插件（myPlugin.js）
export default {
  install(app, options) {
    // 全局添加属性
    app.config.globalProperties.$greet = (name) => {
      alert(`你好, ${name}!`)
    }
    
    // 全局添加组件（如果需要）
    app.component('MyComponent', /* ... */)
  }
}

// 2. 安装插件（main.js）
import { createApp } from 'vue'
import App from './App.vue'
import myPlugin from './myPlugin'

const app = createApp(App)
app.use(myPlugin, { /* 配置选项 */ })
app.mount('#app')

<!-- 3. 任何组件都能用 -->
<template>
  <button @click="$greet('张三')">打招呼</button>
</template>

三、实战对比：三种方式的选择

 

场景	推荐方式	例子
数据+逻辑	组合式函数	用户认证、表单验证、数据请求
DOM操作	自定义指令	自动聚焦、无限滚动、点击外部关闭
全局功能	插件	全局组件、全局方法、第三方库集成

五、最佳实践建议

1. 命名约定：组合函数用 useXxx 开头

2. 单一职责：一个函数只做一件事

3. 响应式连接：返回 ref 或 reactive 保持响应性

4. 明确依赖：参数化配置，提高灵活性

5. 清理副作用：在 onUnmounted 中清理定时器、事件监听等

六、一句话总结

• 组合式函数：🔄 复用业务逻辑（最常用）

• 自定义指令：🎯 复用DOM操作

• 插件：🌐 复用全局功能

简单记忆：日常用组合函数，特殊DOM用指令，全局用插件。

练习建议

1. 把项目中重复的代码抽成组合函数

2. 从简单的开始，比如 useToggle、useDebounce

3. 慢慢积累自己的“工具函数库”

这样是不是清楚多了？就像搭积木一样，把常用功能做成标准件，随用随取！