ref和reactive之間有一些相似之處，因為它們都提供了一種儲存資料並允許資料回應的方法。

但是：

高水準差異：

#

const wrappedBoolean = reactive({ value: true })

來源：Vue 論壇討論

反應式

#reactive取得物件並向原始物件傳回一個回應式代理。

範例

import {ref, reactive} from "vue"; export default { name: "component", setup() { const title = ref("my cool title") const page = reactive({ contents: "meh?", number: 1, ads: [{ source: "google" }], filteredAds: computed(() => { return ads.filter(ad => ad.source === "google") }) }) return { page, title } } }

說明

在上面，每當我們想要更改或存取page的屬性時，
比如說page.ads，page.filteredAds將透過代理程式更新。

要點

• reactive()只接受對象，不JS 基元（String、Boolean、Number、BigInt、Symbol、null、undefined）
• ref()正在幕後呼叫reactive()
• 由於reactive()適用於對象，且ref()呼叫reactive()，因此物件適用於兩者
• 但是，ref()有一個用於重新指派的.value屬性，reactive()沒有這個屬性，因此無法重新指派

使用

ref()當..

• 它是一個基底元（例如'string'、true、23等）
• #這是一個您需要稍後重新分配的物件（如數組 -更多資訊在這裡）

reactive()當..

• 這是一個不需要重新指派的對象，您希望避免ref()的開銷

總結

ref()似乎是可行的方法，因為它支援所有物件類型並允許使用.value重新分配。ref()是一個很好的起點，但是當您習慣了該API 後，您就會知道reactive()的開銷更少，並且您可能會發現它更能滿足您的需求需求。

ref()使用案例

對於基元，您將始終使用ref()，但ref()對於需要重新指派的物件（例如陣列）很有用。

setup() { const blogPosts = ref([]); return { blogPosts }; } getBlogPosts() { this.blogPosts.value = await fetchBlogPosts(); }

上面的reactive()需要重新指派一個屬性而不是整個物件。

setup() { const blog = reactive({ posts: [] }); return { blog }; } getBlogPosts() { this.blog.posts = await fetchBlogPosts(); }

reactive()使用案例

reactive() 的一個很好的用例是一組屬於在一起的原語：

const person = reactive({ name: 'Albert', age: 30, isNinja: true, });

上面的程式碼感覺比上面的程式碼更符合邏輯

const name = ref('Albert'); const age = ref(30); const isNinja = ref(true);

有用的連結

如果您仍然迷失方向，這個簡單的指南對我有幫助：https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

只使用ref()的論點：https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c

reactive()和ref()存在背後的決策以及其他重要信息，Vue Composition API RFC：https://vuejs.org/guide/extras /composition-api-faq。 html#why-composition-api

#