vue3开发常用的核心函数有哪些

Vue 3 开发中，最核心的是一组被称为组合式 API (Composition API) 的函数。它们能帮你更好地组织和复用代码，也是配合 <script setup> 语法的主力。

核心常用函数速查表

组合式函数 (Composables)

除了上述基础函数，Vue 3 开发中的一个强大模式是组合式函数。你可以把它理解成一种更高级的逻辑复用方式。

简单来说，就是把一块包含状态（ref/reactive）和逻辑（watch/生命周期等）的代码，封装成一个以 use 开头的普通函数，然后在不同组件中按需使用。

一个经典的鼠标追踪例子：

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMousePosition() {
  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 } // 返回状态，供组件使用
}

在组件中使用它就非常干净利落：

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

const { x, y } = useMousePosition() // 直接解构，响应式不丢失
</script>

<template>
  <p>鼠标位置: {{ x }}, {{ y }}</p>
</template>

这种模式能帮你把复杂的组件逻辑像搭积木一样组合起来，让代码更清晰、更易于维护。社区中非常流行的工具库 VueUse 就是基于这个思想构建的。