Vue3 Composables 全面使用指南 - 现代化逻辑复用方案

原创 已于 2025-10-29 15:51:07 修改 · 319 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

于 2025-10-29 15:39:45 首次发布

1. Composables 基本概念

1.1 什么是 Composables？

Composables 是 Vue3 Composition API 中利用 Vue 响应式系统来封装和复用有状态逻辑的函数。

1.2 Composables vs Hooks

  • Composables：Vue 生态中的官方术语

  • Hooks：React 中的概念，在 Vue 中常指代相同模式

  • 本质上都是可复用的逻辑函数

1.3 设计原则

  • 以 use 前缀命名

  • 返回响应式数据和方法

  • 支持配置参数

  • 良好的 TypeScript 支持

2. 状态管理 Composables

2.1 基础状态管理

// composables/useCounter.ts
import { ref, computed } from 'vue'

export function useCounter(initialValue: number = 0) {
  const count = ref(initialValue)
  
  const double = computed(() => count.value * 2)
  const isEven = computed(() => count.value % 2 === 0)
  
  function increment(step: number = 1) {
    count.value += step
  }
  
  function decrement(step: number = 1) {
    count.value -= step
  }
  
  function reset() {
    count.value = initialValue
  }
  
  function set(value: number) {
    count.value = value
  }
  
  return {
    // 状态
    count,
    
    // 计算属性
    double,
    isEven,
    
    // 方法
    increment,
    decrement,
    reset,
    set
  }
}

使用示例：

<template>
  <div class="counter">
    <p>当前计数: {{ count }}</p>
    <p>双倍: {{ double }}</p>
    <p>是否偶数: {{ isEven ? '是' : '否' }}</p>
    
    <div class="controls">
      <button @click="increment()">+1</button>
      <button @click="increment(5)">+5</button>
      <button @click="decrement()">-1</button>
      <button @click="reset">重置</button>
      <button @click="set(100)">设为100</button>
    </div>
  </div>
</template>

<script setup lang="ts">
const { count, double, isEven, increment, decrement, reset, set } = useCounter(10)
</script>

2.2 本地存储 Composable

// composables/useLocalStorage.ts
import { ref, watch } from 'vue'

export function useLocalStorage<T>(key: string, defaultValue: T) {
  const data = ref<T>(defaultValue)
  
  // 读取初始值
  try {
    const item = window.localStorage.getItem(key)
    if (item) {
      data.value = JSON.parse(item)
    }
  } catch (error) {
    console.warn(`Error reading localStorage key "${key}":`, error)
  }
  
  // 监听变化并保存
  watch(
    data,
    (newValue) => {
      try {
        if (newValue === null || newValue === undefined) {
          window.localStorage.removeItem(key)
        } else {
          window.localStorage.setItem(key, JSON.stringify(newValue))
        }
      } catch (error) {
        console.warn(`Error setting localStorage key "${key}":`, error)
      }
    },
    { deep: true }
  )
  
  // 手动更新函数
  function update(value: T) {
    data.value = value
  }
  
  // 清除函数
  function clear() {
    data.value = defaultValue
    window.localStorage.removeItem(key)
  }
  
  return {
    data,
    update,
    clear
  }
}

使用示例：

<template>
  <div>
    <h2>用户设置</h2>
    <input v-model="username" placeholder="用户名">
    <select v-model="theme">
      <option value="light">浅色</option>
      <option value="dark">深色</option>
    </select>
    <button @click="clearSettings">清除设置</button>
    
    <p>当前设置: {{ username }}, {{ theme }}</p>
  </div>
</template>

<script setup lang="ts">
const { data: username, update: setUsername } = useLocalStorage('username', '')
const { data: theme, clear: clearTheme } = useLocalStorage('theme', 'light')

const clearSettings = () => {
  setUsername('')
  clearTheme()
}
</script>

3. UI 交互 Composables

3.1 模态框管理

// composables/useModal.ts
import { ref, computed } from 'vue'

interface UseModalOptions {
  initialOpen?: boolean
  closeOnEsc?: boolean
  closeOnOverlay?: boolean
}

export function useModal(options: UseModalOptions = {}) {
  const {
    initialOpen = false,
    closeOnEsc = true,
    closeOnOverlay = true
  } = options
  
  const isOpen = ref(initialOpen)
  
  const open = () => {
    isOpen.value = true
    if (closeOnEsc) {
      document.addEventListener('keydown', handleEsc)
    }
  }
  
  const close = () => {
    isOpen.value = false
    if (closeOnEsc) {
      document.removeEventListener('keydown', handleEsc)
    }
  }
  
  const toggle = () => {
    isOpen.value ? close() : open()
  }
  
  const handleEsc = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
      close()
    }
  }
  
  const handleOverlayClick = (event: MouseEvent) => {
    if (closeOnOverlay && (event.target as HTMLElement).classList.contains('modal-overlay')) {
      close()
    }
  }
  
  return {
    isOpen,
    open,
    close,
    toggle,
    handleOverlayClick
  }
}

使用示例：

<template>
  <div>
    <button @click="open">打开设置</button>
    
    <div v-if="isOpen" class="modal-overlay" @click="handleOverlayClick">
      <div class="modal-content">
        <div class="modal-header">
          <h3>设置</h3>
          <button @click="close" class="close-btn">×</button>
        </div>
        <div class="modal-body">
          <!-- 模态框内容 -->
          <p>这是模态框内容</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { isOpen, open, close, handleOverlayClick } = useModal({
  closeOnEsc: true,
  closeOnOverlay: true
})
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 400px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
</style>

3.2 下拉菜单 Composable

// composables/useDropdown.ts
import { ref, onMounted, onUnmounted } from 'vue'

export function useDropdown() {
  const isOpen = ref(false)
  const dropdownRef = ref<HTMLElement | null>(null)
  
  const open = () => {
    isOpen.value = true
  }
  
  const close = () => {
    isOpen.value = false
  }
  
  const toggle = () => {
    isOpen.value = !isOpen.value
  }
  
  const handleClickOutside = (event: MouseEvent) => {
    if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
      close()
    }
  }
  
  onMounted(() => {
    document.addEventListener('mousedown', handleClickOutside)
  })
  
  onUnmounted(() => {
    document.removeEventListener('mousedown', handleClickOutside)
  })
  
  return {
    isOpen,
    dropdownRef,
    open,
    close,
    toggle
  }
}

使用示例：

<template>
  <div class="dropdown" ref="dropdownRef">
    <button @click="toggle" class="dropdown-toggle">
      菜单 {{ isOpen ? '▲' : '▼' }}
    </button>
    
    <div v-if="isOpen" class="dropdown-menu">
      <a href="#" @click.prevent="handleClick('item1')" class="dropdown-item">选项1</a>
      <a href="#" @click.prevent="handleClick('item2')" class="dropdown-item">选项2</a>
      <a href="#" @click.prevent="handleClick('item3')" class="dropdown-item">选项3</a>
    </div>
  </div>
</template>

<script setup lang="ts">
const { isOpen, dropdownRef, toggle, close } = useDropdown()

const handleClick = (item: string) => {
  console.log('选择了:', item)
  close()
}
</script>

<style scoped>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
}

.dropdown-item:hover {
  background: #f5f5f5;
}
</style>

4. 数据获取 Composables

4.1 通用数据获取

// composables/useFetch.ts
import { ref, watch } from 'vue'

interface UseFetchOptions {
  immediate?: boolean
  refetchOnUpdate?: boolean
}

export function useFetch<T>(url: string, options: UseFetchOptions = {}) {
  const { immediate = true, refetchOnUpdate = true } = options
  
  const data = ref<T | null>(null)
  const error = ref<string | null>(null)
  const isLoading = ref(false)
  const isFinished = ref(false)
  
  const execute = async (customUrl?: string) => {
    isLoading.value = true
    error.value = null
    isFinished.value = false
    
    try {
      const targetUrl = customUrl || url
      const response = await fetch(targetUrl)
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      data.value = await response.json()
      isFinished.value = true
    } catch (err) {
      error.value = err instanceof Error ? err.message : '未知错误'
    } finally {
      isLoading.value = false
    }
  }
  
  // 自动执行
  if (immediate) {
    execute()
  }
  
  // 监听 URL 变化
  if (refetchOnUpdate) {
    watch(() => url, execute)
  }
  
  // 重新获取
  const refetch = () => execute()
  
  return {
    data,
    error,
    isLoading,
    isFinished,
    execute,
    refetch
  }
}

使用示例：

<template>
  <div>
    <div v-if="isLoading">加载中...</div>
    <div v-else-if="error">错误: {{ error }}</div>
    <div v-else-if="data">
      <h3>用户信息</h3>
      <pre>{{ data }}</pre>
    </div>
    
    <button @click="refetch" :disabled="isLoading">
      {{ isLoading ? '加载中...' : '重新加载' }}
    </button>
  </div>
</template>

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
}

const userId = ref(1)
const url = computed(() => `https://jsonplaceholder.typicode.com/users/${userId.value}`)

const { data, error, isLoading, refetch } = useFetch<User>(url.value, {
  immediate: true,
  refetchOnUpdate: true
})

// 切换用户
const nextUser = () => {
  userId.value++
}
</script>

4.2 增强版 API Composable

// composables/useApi.ts
import { ref } from 'vue'

interface ApiOptions {
  baseURL?: string
  headers?: Record<string, string>
}

export function useApi(options: ApiOptions = {}) {
  const { baseURL = '', headers = {} } = options
  
  const loading = ref(false)
  const error = ref<string | null>(null)
  
  const request = async <T>(
    endpoint: string,
    config: RequestInit = {}
  ): Promise<T> => {
    loading.value = true
    error.value = null
    
    try {
      const url = `${baseURL}${endpoint}`
      const response = await fetch(url, {
        headers: {
          'Content-Type': 'application/json',
          ...headers,
          ...config.headers
        },
        ...config
      })
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`)
      }
      
      return await response.json()
    } catch (err) {
      error.value = err instanceof Error ? err.message : '请求失败'
      throw err
    } finally {
      loading.value = false
    }
  }
  
  const get = <T>(endpoint: string) => 
    request<T>(endpoint, { method: 'GET' })
  
  const post = <T>(endpoint: string, data?: any) =>
    request<T>(endpoint, {
      method: 'POST',
      body: data ? JSON.stringify(data) : undefined
    })
  
  const put = <T>(endpoint: string, data?: any) =>
    request<T>(endpoint, {
      method: 'PUT',
      body: data ? JSON.stringify(data) : undefined
    })
  
  const del = <T>(endpoint: string) =>
    request<T>(endpoint, { method: 'DELETE' })
  
  return {
    loading,
    error,
    request,
    get,
    post,
    put,
    delete: del
  }
}

使用示例：

<template>
  <div>
    <button @click="fetchUsers" :disabled="loading">
      {{ loading ? '加载中...' : '获取用户' }}
    </button>
    
    <div v-if="error" class="error">{{ error }}</div>
    
    <div v-if="users">
      <div v-for="user in users" :key="user.id" class="user">
        {{ user.name }} - {{ user.email }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface User {
  id: number
  name: string
  email: string
}

const users = ref<User[]>([])

const { get, loading, error } = useApi({
  baseURL: 'https://jsonplaceholder.typicode.com'
})

const fetchUsers = async () => {
  try {
    users.value = await get<User[]>('/users')
  } catch (err) {
    console.error('获取用户失败:', err)
  }
}
</script>

5. 工具类 Composables

5.1 防抖 Composable

// composables/useDebounce.ts
import { ref, watch } from 'vue'

export function useDebounce<T>(value: T, delay: number = 300) {
  const debouncedValue = ref<T>(value) as { value: T }
  
  let timeoutId: number | null = null
  
  watch(
    () => value,
    (newValue) => {
      if (timeoutId) {
        clearTimeout(timeoutId)
      }
      
      timeoutId = window.setTimeout(() => {
        debouncedValue.value = newValue
      }, delay)
    },
    { immediate: true }
  )
  
  // 手动取消
  const cancel = () => {
    if (timeoutId) {
      clearTimeout(timeoutId)
      timeoutId = null
    }
  }
  
  return {
    debouncedValue,
    cancel
  }
}

使用示例：

<template>
  <div>
    <input v-model="searchTerm" placeholder="搜索...">
    <p>实时输入: {{ searchTerm }}</p>
    <p>防抖后: {{ debouncedValue }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const searchTerm = ref('')
const { debouncedValue } = useDebounce(searchTerm, 500)

// 监听防抖后的值
watch(debouncedValue, (newValue) => {
  console.log('执行搜索:', newValue)
  // 这里可以执行搜索逻辑
})
</script>

5.2 屏幕断点 Composable

// composables/useBreakpoints.ts
import { ref, onMounted, onUnmounted } from 'vue'

const breakpoints = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280,
  '2xl': 1536
}

export function useBreakpoints() {
  const width = ref(window.innerWidth)
  
  const updateWidth = () => {
    width.value = window.innerWidth
  }
  
  onMounted(() => {
    window.addEventListener('resize', updateWidth)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', updateWidth)
  })
  
  const isMobile = computed(() => width.value < breakpoints.md)
  const isTablet = computed(() => width.value >= breakpoints.md && width.value < breakpoints.lg)
  const isDesktop = computed(() => width.value >= breakpoints.lg)
  
  const currentBreakpoint = computed(() => {
    if (width.value < breakpoints.sm) return 'xs'
    if (width.value < breakpoints.md) return 'sm'
    if (width.value < breakpoints.lg) return 'md'
    if (width.value < breakpoints.xl) return 'lg'
    if (width.value < breakpoints['2xl']) return 'xl'
    return '2xl'
  })
  
  return {
    width,
    isMobile,
    isTablet,
    isDesktop,
    currentBreakpoint
  }
}

使用示例：

<template>
  <div>
    <p>屏幕宽度: {{ width }}px</p>
    <p>当前断点: {{ currentBreakpoint }}</p>
    
    <div v-if="isMobile" class="mobile-layout">
      移动端布局
    </div>
    
    <div v-else-if="isTablet" class="tablet-layout">
      平板布局
    </div>
    
    <div v-else class="desktop-layout">
      桌面端布局
    </div>
  </div>
</template>

<script setup lang="ts">
const { width, isMobile, isTablet, isDesktop, currentBreakpoint } = useBreakpoints()
</script>

6. 组合使用 Composables

6.1 用户认证 Composable（组合多个）

// composables/useAuth.ts
import { computed } from 'vue'

export function useAuth() {
  const { data: token, update: setToken } = useLocalStorage('auth_token', '')
  const { data: user, execute: fetchUser } = useFetch<User>('/api/user', {
    immediate: false
  })
  
  const isAuthenticated = computed(() => !!token.value)
  
  const login = async (credentials: LoginCredentials) => {
    const { post } = useApi()
    
    try {
      const response = await post<LoginResponse>('/api/login', credentials)
      setToken(response.token)
      await fetchUser()
      return response
    } catch (error) {
      throw error
    }
  }
  
  const logout = () => {
    setToken('')
    user.value = null
  }
  
  // 自动获取用户信息
  if (isAuthenticated.value) {
    fetchUser()
  }
  
  return {
    user,
    isAuthenticated,
    login,
    logout
  }
}

7. 最佳实践

7.1 命名规范

// 好的命名
useCounter
useLocalStorage
useFetch
useBreakpoints

// 避免的命名
getCounter() // 不是函数式
counterHook() // 冗余

7.2 返回值设计

// 返回响应式状态和方法
return {
  // 状态
  data,
  loading,
  error,
  
  // 方法
  execute,
  reset,
  
  // 计算属性
  isEmpty: computed(() => !data.value)
}

7.3 错误处理

// 提供清晰的错误信息
try {
  // 业务逻辑
} catch (error) {
  error.value = error instanceof Error 
    ? error.message 
    : '操作失败'
  throw error // 重新抛出以便外部处理
}

7.4 TypeScript 支持

// 完整的类型定义
interface UseFetchReturn<T> {
  data: Ref<T | null>
  error: Ref<string | null>
  loading: Ref<boolean>
  execute: () => Promise<void>
}

export function useFetch<T>(url: string): UseFetchReturn<T> {
  // 实现
}

总结

Composables 是 Vue3 中强大的逻辑复用工具，通过合理的组合和设计，可以：

  1. 提高代码复用性 - 相同的逻辑在不同组件中复用

  2. 改善代码组织 - 按功能而不是选项组织代码

  3. 增强类型安全 - 完整的 TypeScript 支持

  4. 便于测试 - 独立的逻辑单元更容易测试

建议根据项目需求创建适当的 Composables，并在团队中建立统一的使用规范。

Vue3 组合式函数
前端知识分享喵
03-28 2234
：“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。这里需要提一下的概念：它只包括了可重用的逻辑 (数据获取、分页等) 而不需要自己渲染内容，视图输出通过作用域插槽全权交给了消费者组件。大部分能用无渲染组件实现的功能都可以通过组合式 API 以另一种更高效的方式实现，并且还不会带来额外组件嵌套的开销。
Vue 3 组件通信系列（五） 使用 Pinia 替代 Vuex，集中管理组件状态
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
07-17 1385
本文介绍了Vue 3中使用Pinia替代Vuex进行集中状态管理的优势和实践方法。文章首先分析了集中状态管理的必要性，包括解决多组件共享数据冗余、状态持久化、统一控制等问题。随后详细对比了Pinia与Vuex的区别，指出Pinia具有更简洁的API、更好的TypeScript支持、更小的体积等优势。最后提供了Pinia的具体使用指南，包括安装配置、创建Store模块以及在组件中调用的方法。通过代码示例展示了Pinia如何简化状态管理逻辑，实现更优雅的组件通信方案。
使用 Composables 封装通用业务逻辑：搜索、分页、表单
最新发布
北京百思可瑞教育
12-02 810
本文介绍了如何使用 Vue 3 的 Composition API 封装通用业务逻辑，重点讲解了搜索和分页功能的封装实现。通过创建可复用的 Composable 函数（useSearch 和 usePagination），可以显著提高代码复用性和可维护性。文章提供了带防抖功能的搜索实现和完整的分页逻辑封装，并展示了如何在组件中使用这些封装好的逻辑。这些模式不仅减少了重复代码，还使业务逻辑更清晰、更易于测试和维护。
深入探索 Nuxt3 Composables：掌握目录架构与内置API的高效应用
https://blog.cmdragon.cn/
06-23 1381
摘要：“本文深入探讨了Nuxt3 Composables，重点介绍了其目录架构和内置API的高效应用。通过学习本文，读者将能够更好地理解和利用Nuxt3 Composables来构建高效的应用程序。”
Vue状态管理进阶：自定义Hooks（Composables）模式全解析
北京百思可瑞教育
10-22 960
Vue状态管理进阶：自定义Hooks模式解析 Vue 3的自定义Hooks（Composables）通过组合式API实现了逻辑复用和状态管理，解决了Vue 2中Mixins的命名冲突和复用性差等问题。文章从三个维度展开： 底层架构：解析响应式系统机制（ref/reactive/computed）与生命周期的深度整合，展示了useMousePosition等实例的响应式实现，并介绍依赖注入系统的扩展应用。 设计模式：从原子化封装（如useCounter）到组合多个原子操作（如useForm），再到高级异步状态
Vue3中的Composables组合式函数,Vue3实现minxins
qq_24428851的博客
07-07 1604
Vue3中的Composables是什么Vue3中的Composables 简单理解其实就是类React Hooks式的组合式函数封装方法。Vue官方称为Composables 组合式函数。
Vue3 组合式函数Composables
秋秋小事
03-27 1735
组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。我们可以把一些可以复用的逻辑封装成组合式函数放到js文件中，在vue文件中通过import来使用这些逻辑，使vue文件更瘦，逻辑更清晰。一个小栗子，// x、y为ref响应式的number类型return num;
vue-next-select：Vue 3 高性能选择器组件解决方案
vue-next-select 是一个专为 Vue 3 框架设计的现代化选择器（Select）组件解决方案，旨在为前端开发者提供一个功能强大、灵活可扩展且类型安全的选择输入控件。该项目基于 Vue 3 的 Composition API 和响应式系统...
Vite+Vue3+TypeScript项目实战完整指南
该项目不仅提供了完整的项目结构和开发环境配置，还通过实际编码实践展示了如何将这些先进技术有机整合，构建高效、可维护、类型安全的现代化 Web 应用程序。从标题和描述反复强调“最新完整”与“项目实战”可以...
Nuxt3框架入门与实战：基于Vite和Vue3的全栈开发指南
资源摘要信息:"Nuxt3是基于Vue3、Vite和Nitro构建的现代化前端框架，旨在为开发者提供高效、灵活且功能强大的全栈开发体验。作为Nuxt框架的重大升级版本，Nuxt3于2022年11月16日至17日在Nuxt全球在线大会上正式发布v...
Vue3单元测试：Jest与TestingLibrary实战指南
随后深入探讨了Vue3特有的测试挑战与优势：由于Composition API允许将逻辑抽离为可复用的组合函数（composables），这使得业务逻辑不再依附于模板结构，从而极大提升了独立测试的可能性；同时，响应式系统由Object....
一文解释什么是 Vue 里的 Composables？
xuxian的博客
06-20 730
在 Vue 应用中，“Composable”指的是一个利用 Vue 的 Composition API 封装和重用有状态逻辑的函数。
组合式函数(Composables)解决了mixins的哪些痛点？
青年码农
08-25 975
点击上方“青年码农”关注回复“源码”获取各类源码，软件Vue3 中新增了“组合式函数”(Composables)，它是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。功能类似 Vue2 的 mixins，但又有所不同。先看看 Vue2 中的 mixins混入的使用官方介绍：混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项...
composables 目录下的文件（web前端）
like_a_diamond的博客
07-05 798
composables目录的主要目的是为了更好地组织和复用代码，使项目结构更加清晰，逻辑更加模块化。这对于大型应用程序尤其有帮助，可以极大地提高开发效率和代码质量。
Vue 3 的 Composable 函数是什么？如何编写和使用它们？
有我更精彩的博客
07-16 2414
Vue 3 推出了一个全新的API——Composition API，以使开发者能够更自由、灵活地重用逻辑。Composable函数是通过 Composition API 实现逻辑复用的一种最佳方式。它们本质上是一个返回组合式API状态和行为的函数，通过调用这些函数，你可以将共用的逻辑抽离出来，从而提高代码复用性。
Vue 3 组合式函数（Composables）全面解析：从原理到实战
2501_92234528的博客
10-15 491
我们不再需要依赖 data、methods、computed 这些分散的选项，而是能用函数的方式，灵活组织逻辑。假如我们还想监听滚动、键盘等事件，可以进一步抽象出一个事件监听函数 👇。💡 这样我们不仅复用了逻辑，还建立了逻辑的“组合关系” ——也就是说，它不仅可以处理计算逻辑、请求接口、事件监听，还能。你可以自由拼接、拆解、组合它们，构建出任何复杂的交互逻辑。假设我们要做一个“鼠标追踪器”，实时显示鼠标位置。很好，但如果我们多个页面都要复用这个逻辑呢？，就是在这个新体系下，用于。
为什么vue3 需要 Composition API？
geek word
11-29 1451
文章目录什么是 Composition API？什么是可组合？Composables 和 Mixin 解决的类似问题组合物 vs Mixin数据/方法来源的清晰度命名冲突来自组件的变异模块的反应数据可组合的全局状态结论 什么是 Composition API？ Vue 3 引入了 Composition API，此后它席卷了整个社区。在我看来，Composition API 的唯一最佳特性是能够将反应状态和功能提取到它们自己的可重用模块或“可组合”中。 什么是可组合？ 那么，什么是 Vue.js Compo
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

好奇的候选人面向对象

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值