【vue高频面试题】第2题：Vue 3 中 ref 和 reactive 的区别是什么？什么时候用哪一个？

Vue 3 中 ref 与 reactive 使用指南（面试/实战）

主问题

问：ref 和 reactive 的区别是什么？什么时候用哪一个？

面试官追问（示例）

• 基础区别：底层实现差异？reactive 包基本类型会怎样？
• 使用场景：哪些场景必须用 ref？何时更适合 reactive？
• 模板绑定：为何模板里 ref 不需要 .value？reactive 是否需要？
• 响应式嵌套：嵌套对象是否响应？深层嵌套如何优化？

参考答案 / 要点整理

1. 基础区别

特性	ref	reactive
数据类型	基本类型或对象	对象或数组
返回值	包装对象 { value: ... }	直接返回代理对象（Proxy）
模板访问	模板自动解包，无需 .value	直接使用属性
底层实现	RefImpl + Proxy（访问时解包）	Proxy 深度响应式

示例：

import { ref, reactive } from 'vue';

const count = ref(0);              // 基本类型 → 使用 ref
const state = reactive({ a: 1 });  // 对象/数组 → 使用 reactive

2. 使用场景

• 选择 ref
  • 基本类型（string、number、boolean）。
  • 需要单独引用/独立更新的值（计数器、输入值）。
• 选择 reactive
  • 管理对象/数组的整体状态（包含多属性）。
  • 深层嵌套对象需整体响应式代理。

3. 模板绑定与 .value

在 <template> 中，Vue 会自动解包 ref，无需 .value。在 JS 逻辑（script）中仍需通过 .value 访问。

<template>
  <div>{{ count }}</div>   <!-- 自动解包，无需 .value -->
  <div>{{ state.a }}</div> <!-- reactive 直接访问属性 -->
  
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
const count = ref(0)
const state = reactive({ a: 1 })
</script>

4. 响应式嵌套与优化策略

• reactive 对嵌套对象默认递归响应式，无需手动处理。
• 对象很大或深层嵌套场景，可拆分为多个 ref，降低单个 Proxy 的更新成本。

import { ref, reactive } from 'vue'

// 整体管理（默认深度响应式）
const user = reactive({
  profile: { name: 'Alice', age: 18 },
  settings: { theme: 'dark' }
})

// 性能敏感场景：拆分为多个 ref，按需更新
const profile = ref({ name: 'Alice', age: 18 })
const settings = ref({ theme: 'dark' })

小结（面试亮点）

• 基本类型与独立值用 ref，对象/数组用 reactive。
• 模板自动解包 ref；JS 中访问 ref 需 .value。
• 深层嵌套对象可用 reactive；性能敏感场景可拆分为多个 ref。