在 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 |
8. 性能考慮
ref()對于簡單值比reactive()更輕量- 避免在大型數組或復雜對象上使用多個
ref()，考慮使用reactive() - 在組合函數中優先返回
ref()以保持一致性
9. 最佳實踐
- 命名約定：為 ref 對象添加
Ref后綴，如inputRef，提高代碼可讀性。 - 類型安全：為 ref 提供明確的類型注解（TypeScript）。
- 適度使用：簡單數據用
ref()，復雜對象用reactive()。 - 組合函數：在可組合函數中始終返回
ref()以保持一致性。
10. 結語
ref() 作為 Vue3 響應式系統的基石之一，提供了簡單而強大的狀態管理能力。理解其工作原理和適用場景，能夠幫助開發者編寫更高效、更可維護的 Vue 代碼。無論是簡單的計數器還是復雜的業務邏輯，ref() 都能勝任，是 Vue3 開發中不可或缺的工具。
希望本文能幫助你更好地理解和運用 ref()，在你的 Vue 項目中發揮它的最大價值！
)
)
