Vue 3 核心函数全解（组合式 API + 常用工具函数）

本文按最常用优先级分类整理，包含用法、场景和示例，覆盖开发 99% 的需求。

Vue 3 核心函数分为两大类：组合式 API 核心函数（写业务必用）、工具函数（辅助开发）。

---

一、组合式 API 核心函数（<script setup> 中必用）

1. ref() —— 定义基础类型响应式数据

• 作用：把字符串、数字、布尔值等基础类型变成响应式
• 取值/赋值：必须用 .value（模板中可省略）
• 也可用于引用 DOM、组件实例

<script setup>
// 1. 导入函数
import { ref } from 'vue'

// 2. 定义响应式数据
const count = ref(0)
const msg = ref('Hello Vue3')

// 3. 修改数据（必须加 .value）
const add = () => count.value++
</script>

<template>
  <!-- 模板中直接用，无需 .value -->
  <p>{{ msg }}</p>
  <button @click="add">{{ count }}</button>
</template>

2. reactive() —— 定义对象/数组响应式数据

• 作用：深度响应式，适用于对象、数组、复杂数据结构
• 取值/赋值：无需 .value，直接操作

<script setup>
import { reactive } from 'vue'

// 定义对象/数组
const user = reactive({
  name: '张三',
  age: 18,
  hobbies: ['编程', '读书']
})

// 直接修改
const updateUser = () => {
  user.age++
  user.hobbies.push('运动')
}
</script>

3. computed() —— 计算属性

• 作用：基于响应式数据派生新数据，自带缓存
• 用法：只读计算属性、可写计算属性

<script setup>
import { ref, computed } from 'vue'
const count = ref(1)

// 只读计算属性（最常用）
const doubleCount = computed(() => count.value * 2)

// 可写计算属性
const writableCount = computed({
  get() { return count.value },
  set(val) { count.value = val }
})
</script>

4. watch() —— 侦听器

• 作用：监听响应式数据变化，执行异步/复杂逻辑
• 可监听：ref、reactive、多个数据源

<script setup>
import { ref, watch } from 'vue'
const count = ref(0)

// 基础监听
watch(count, (newVal, oldVal) => {
  console.log('count变化：', newVal, oldVal)
})

// 监听 reactive 对象（必须指定属性/用 getter）
const user = reactive({ age: 18 })
watch(() => user.age, (newVal) => {})

// 立即执行 + 深度监听
watch(count, () => {}, {
  immediate: true,  // 初始化立即执行一次
  deep: true        // 深度监听（对象嵌套数据）
})
</script>

5. watchEffect() —— 自动追踪依赖侦听器

• 优势：无需指定监听目标，自动追踪内部使用的响应式数据
• 适用：简单监听、依赖不固定的场景

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)

// 自动监听 count，变化立即执行
watchEffect(() => {
  console.log('最新count：', count.value)
})
</script>

6. defineProps() —— 子组件接收父组件传值

• 专属 <script setup>，无需导入
• 用于定义组件 props（类型校验、默认值、必传）

<script setup>
// 子组件
const props = defineProps({
  title: {
    type: String,
    default: '默认标题',
    required: true
  },
  list: Array
})
// 直接使用 props.title
</script>

7. defineEmits() —— 子组件向父组件发送事件

• 专属 <script setup>，无需导入
• 子组件触发事件，父组件监听接收数据

<script setup>
// 子组件：定义事件名
const emit = defineEmits(['update-count'])

// 触发事件
const sendToParent = () => {
  emit('update-count', 100)
}
</script>

8. defineExpose() —— 子组件暴露属性/方法给父组件

• 作用：子组件主动暴露数据/方法，父组件通过 ref 调用

<script setup>
// 子组件
const childFn = () => console.log('子组件方法')
// 暴露出去
defineExpose({ childFn })
</script>

<!-- 父组件调用 -->
<Child ref="childRef" />
<script setup>
import { ref } from 'vue'
const childRef = ref(null)
// 调用子组件方法
childRef.value.childFn()
</script>

---

二、Vue 3 生命周期函数（组合式 API）

Vue 3 组合式 API 用函数形式调用，常用 4 个：

<script setup>
import { onMounted, onUpdated, onUnmounted } from 'vue'

// 1. 组件挂载完成（DOM 渲染完毕，请求数据、操作DOM）
onMounted(() => {
  console.log('组件挂载')
  // 这里发接口请求最佳
})

// 2. 组件更新完成
onUpdated(() => {})

// 3. 组件卸载（清除定时器、解绑事件）
onUnmounted(() => {
  clearInterval(timer)
})
</script>

---

三、工具函数（高频实用）

1. toRefs() —— 解构 reactive 不丢失响应式

• 问题：直接解构 reactive 对象会失去响应式
• 解决：用 toRefs 转为响应式 ref

<script setup>
import { reactive, toRefs } from 'vue'
const user = reactive({ name: '张三', age: 18 })

// 正确：解构后仍响应式
const { name, age } = toRefs(user)
</script>

2. toRef() —— 提取对象单个属性为响应式

const age = toRef(user, 'age')

3. nextTick() —— DOM 更新后执行回调

• 适用：修改数据后，立即操作最新 DOM

import { nextTick } from 'vue'
const updateData = async () => {
  count.value++
  // 等待 DOM 更新完成
  await nextTick()
  // 操作最新 DOM
}

---

四、完整示例（整合核心函数）

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>计数：{{ count }}</p>
    <p>双倍计数：{{ doubleCount }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// 1. 导入核心函数
import { ref, computed, watch, onMounted } from 'vue'

// 2. Props 接收
defineProps({
  title: String
})

// 3. 响应式数据
const count = ref(0)

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

// 5. 方法
const add = () => count.value++

// 6. 侦听
watch(count, (val) => {
  console.log('计数变为：', val)
})

// 7. 生命周期
onMounted(() => {
  console.log('组件初始化完成')
})
</script>

---

总结

1. 基础数据用 ref，对象/数组用 reactive
2. 派生数据用 computed，监听变化用 watch/watchEffect
3. 组件通信：defineProps（父→子）、defineEmits（子→父）
4. 生命周期核心：onMounted（请求数据）、onUnmounted（清理）
5. 解构响应式对象：必用 toRefs

这些是 Vue 3 开发最核心、最常用的函数，掌握它们就能完成绝大多数业务开发。