当前位置：首页 > news >正文

【vue-6】Vue3 响应式数据声明：深入理解 ref()

news 2025/7/21 9:33:37

在 Vue3 的 Composition API 中，ref() 是最基础也是最常用的响应式数据声明方式之一。它为开发者提供了一种简单而强大的方式来管理组件状态。本文将深入探讨 ref() 的工作原理、使用场景以及最佳实践。

1. 什么是 ref()？

ref() 是 Vue3 提供的一个函数，用于创建一个响应式的引用对象。它可以包装任何类型的值，使其变为响应式数据。

import { ref } from 'vue'const count = ref(0)

2. ref() 的核心特性

2.1 响应式包装

ref() 接受一个内部值并返回一个响应式的、可变的 ref 对象，该对象只有一个 .value 属性指向内部值。

const num = ref(10)
console.log(num.value) // 10num.value = 20
console.log(num.value) // 20

2.2 类型保留

ref() 会保留原始值的类型信息，TypeScript 用户可以获得完整的类型推断。

const message = ref('Hello') // Ref<string>
const age = ref(25) // Ref<number>
const user = ref({ name: 'Alice' }) // Ref<{ name: string }>

2.3 模板自动解包

在模板中使用 ref 时，不需要通过 .value 访问，Vue 会自动解包。

<template><div>{{ count }}</div><!-- 不需要写成 count.value -->
</template>

3. ref() 的工作原理

3.1 底层实现

ref() 本质上是对 reactive() 的封装，它创建了一个包含 value 属性的响应式对象：

function ref(value) {return reactive({ value })
}

3.2 为什么需要 ref()？

你可能会有疑问：既然有 reactive()，为什么还需要 ref()？主要原因有：

原始值包装：JavaScript 原始值（string, number, boolean 等）不是对象，无法用 reactive() 直接包装。
一致性：在组合函数中返回响应式值时，使用 ref() 可以保持一致性。
性能考虑：对于简单值，ref() 比 reactive() 更轻量。

4. ref() 的使用场景

4.1 基本类型数据

const name = ref('Alice')
const age = ref(25)
const isActive = ref(true)

4.2 DOM 元素引用

<template><input ref="inputRef" />
</template><script setup>
import { ref, onMounted } from 'vue'const inputRef = ref(null)onMounted(() => {inputRef.value.focus()
})
</script>

4.3 组合函数返回值

// useCounter.js
import { ref } from 'vue'export function useCounter(initialValue = 0) {const count = ref(initialValue)function increment() {count.value++}return {count,increment}
}

5. ref() 的高级用法

5.1 解构 ref 对象

const user = ref({name: 'Alice',age: 25
})// 解构会失去响应性
const { name, age } = user // ❌ 错误方式// 正确方式：使用 toRefs
import { toRefs } from 'vue'
const { name, age } = toRefs(user.value) // ✅

5.2 ref() 与 reactive() 结合

const state = reactive({count: ref(0), // 自动解包user: ref({ name: 'Alice' })
})console.log(state.count) // 0，不需要 .value

5.3 自定义 ref

Vue 提供了 customRef() 用于创建自定义的 ref 实现：

import { customRef } from 'vue'function debouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}const text = debouncedRef('hello')

6. ref() 的注意事项

.value 访问：在 JavaScript 中必须通过 .value 访问 ref 的值，但在模板中会自动解包。
嵌套 ref：避免不必要的嵌套 ref，如 ref(ref(0))。
数组和对象：对于复杂数据结构，reactive() 可能更合适。
解构问题：直接解构 ref 对象会失去响应性，使用 toRefs 解决。

7. ref() vs reactive()

特性	ref()	reactive()
创建方式	`ref(value)`	`reactive(object)`
访问方式	需要 `.value` (JS中)	直接访问
适用类型	任意类型	对象/数组
模板使用	自动解包	直接使用
解构	需要使用 `toRefs`	需要使用 `toRefs`