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