小聊一下

说实话，这玩意儿在 Vue3 里经常让新人抓狂。

哈哈，你别急，我这老友儿慢慢跟你唠。

ref 和 reactive kan起来差不多，实际上是两条平行线。

咱就是说选哪个得kan场景。

先把概念抖开聊聊吧。

ref 是啥玩意儿

ref 本质上是一个包装对象，里面只有一个 .value 属性。

它Ke以把基本类型也变成响应式，数字、字符串统统搞定。

比如：

const count = ref

后面访问就得写 count.value。

别慌，这个 .value 不会让你写得太累。

reactive 的魔法

reactive 接受一个对象或数组，然后返回一个 Proxy。

整个对象的属性dou会被深度代理，省去 .value 的麻烦。

例子：

const state = reactive

直接用 state.name、state.age 就行啦。

到底该怎么挑？

先说基础类型，显然要选 ref。

因为 reactive 只Neng处理对象和数组，不管你怎么套dou不行。

Ru果你的数据是个大对象，层级hen多，那就倾向于 reactive。

它一次性把所有属性dou变成响应式，代码geng简洁。

解构时的坑

用了 reactive 后直接解构会丢失响应性，像这样：

const { name } = state // name 不再是响应式的

想保留响应式，Ke以用 toRefs：

const { name } = toRefs

.value 又出现了不过这次是必须的。

整体替换 vs 单属性修改

.value 的好处是Ke以整体替换对象：

userRef.value = { name: '李四', age: 20 }

reactive 则只Neng改属性，要想整体替换只Neng重新赋值给一个新变量，容易丢失响应式。

实战案例：表单状态管理

表单里有hen多字段，需要随时重置。

这时候我一般会用 ref 包裹整个表单对象：

const form = ref

重置只要一句：

form.value = { username: '', email: '', password: '' }

If you prefer reactive…

Ru果你geng喜欢直接在模板里写 state.xxx，Ke以这么Zuo：

const formState = reactive

但记住一旦你想整体覆盖，就得手动遍历每个属性或者 Object.assign，稍微麻烦点儿。

A little detour – 为什么百度不收录？

# 问题来了：有时候我们写的页面根本上不了百度搜索，引擎根本不收录。

可Neng是因为页面没有静态内容，全部靠 JavaScript 渲染。

Spa 单页应用Ru果没有服务端渲染或预渲染，爬虫抓不到真实 DOM。

Crawl budget 限制也会导致频繁geng新的页面被忽略。

# 解决办法：给关键内容加上 SSR 或者使用 prerender 插件生成静态快照；再配合合理的 meta 标签和 sitemap.xml，让百度知道哪些页面值得抓取。

性Neng细节小贴士

AFAIK，reactive 因为少了一层包装，在极端高频geng新场景下略快一点。

Caveats & 常见误区 .value 的自我纠正时刻

"不对不对，我刚才说的是 ref 必须 .value，其实在模板里 Vue 会自动解包。"

"那个那个"，别忘了 Typescript 的坑

.value 在类型推导时会让代码稍显臃肿；Ke以配合 defineComponent 的 PropType 来简化。

end of story – 小结一下吧

If you have primitive data → 用 ref.

If you have a deep object/array and love dot notation → 用 reactive.

If you need frequent whole‑object replacement → ref geng灵活.

a final tip：别把两者硬套在一起，用到哪儿就选哪儿，保持代码清晰才是王道。哈哈，你懂的！祝开发顺利~

---