1. 组合式 API：ref()#

定义：ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

1
import { ref } from 'vue'
2
const count = ref(0)
3
count.value++ // 修改值

• 模板使用：无需 .value，自动解包；可直接在事件监听器中修改（如@click=“count++”）。
• 优势：支持所有数据类型（原始值、对象等），可传递给函数并保持响应性。
• 简化语法：在<script setup>中，顶层声明的ref和方法可直接在模板使用，无需手动暴露。

注意：在 JavaScript 中需要 .value 来访问和修改 ref 的值。

2. 组合式 API：reactive()#

定义：reactive()接收对象 / 数组等，返回其响应式代理（Proxy），直接通过属性访问 / 修改。

1
import { reactive } from 'vue'
2
const state = reactive({ count: 0 })
3
state.count++ // 修改值

特性：代理与原始对象不等价（reactive(raw) !== raw），同一原始对象多次调用reactive()返回同一代理。

1. 深层响应式#

默认行为：ref()和reactive()均默认实现深层响应性，嵌套对象 / 数组的修改会被追踪。

1
const obj = ref({ nested: { count: 0 } })
2
obj.value.nested.count++ // 触发响应式更新

浅层响应性：可通过shallowRef（仅.value访问被追踪）或shallowReactive（仅顶层属性响应式）关闭深层响应性，优化性能。

2. DOM 更新时机#

异步更新：Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。 等待更新：需在 DOM 更新后执行代码时，使用nextTick()：

1
async function increment() {
2
  count.value++
3
  await nextTick() // 此时DOM已更新
4
}

为什么 ref 需要 .value 访问？#

因为在标准的 JavaScript 中，检测普通变量的访问和修改是行不通的。但可以通过 getter 和 setter 方法来拦截对象属性的 get 和 set 操作。

而 ref 的设计思路是：用一个对象包裹原始值，这个对象只暴露一个 .value 属性。通过为 .value 定义 getter 和 setter，Vue 就能在你访问 xxx.value 时追踪依赖（收集谁在用这个值），在你修改 xxx.value = ... 时触发更新（通知用到这个值的地方重新渲染）。

简单说，.value 是 Vue 为了让原始类型也能具备响应式，而 “绕的一小步”—— 通过对象属性的拦截能力，间接实现对原始值的追踪。

ref()和reactive()的核心区别是什么？#

① 支持类型：ref()支持所有数据类型（原始值、对象等），reactive()仅支持对象、数组等非原始类型； ② 访问方式：ref()需通过.value访问 / 修改值，reactive()直接通过属性访问； ③ 局限性：reactive()存在无法替换对象、解构丢失响应性等问题，ref()无这些限制； ④ 解包规则：ref()在模板中自动解包，作为响应式对象属性时也自动解包，而reactive()无类似解包逻辑。

为什么修改响应式状态后 DOM 没有立即更新？如何确保在 DOM 更新后执行代码？#

Vue 会将所有状态修改缓冲到 “next tick” 更新周期中，确保每个组件只更新一次，提升性能。若需在 DOM 更新后执行代码，可使用nextTick()全局 API，它返回一个 Promise，在 DOM 更新完成后 resolve。示例：

1
import { nextTick } from 'vue'
2
async function update() {
3
  count.value++
4
  await nextTick()
5
  // DOM已更新
6
}

在模板中使用ref时，为什么有时需要显式.value，有时不需要？#

模板中ref的解包规则为： ① 顶级属性自动解包（无需.value），如const count = ref(0)在模板中{{ count }}生效； ② 嵌套属性（如object.id，其中id是ref）不会自动解包，需解构为顶级属性（const { id } = object）才能解包； ③ 若ref是文本插值的最终值（如{{ object.id }}），会自动解包（等价于{{ object.id.value }}）。因此，非顶级嵌套ref在模板中参与计算时需先解构，否则需显式处理。

浅层响应性的核心适用场景是什么？#

核心适用场景：数据 “大而不变” 或 “仅需整体替换” 当数据满足以下特征时，用浅层响应性可以显著提升性能：

处理 “大型不可变数据”（如后端返回的海量列表） 场景：从后端获取的大型列表（如 1000 条以上数据），且业务中只需要展示、不需要修改其中的嵌套属性（仅可能整体替换列表）。 问题：如果用普通ref或reactive，Vue 会递归地将所有嵌套属性转为响应式（创建大量 Proxy），导致初始化时性能开销大。 解决方案：用shallowRef，只追踪.value的整体替换，不处理内部属性：

1
import { shallowRef } from 'vue'
2
// 假设data是包含1000条数据的大型数组
3
const bigList = shallowRef(data)
4

5
// ✅ 有效：整体替换时触发更新（符合业务需求）
6
bigList.value = newData
7

8
// ❌ 无效：修改内部属性不会触发更新（但业务本就不需要修改）
9
bigList.value[0].name = '新名字'

管理 “纯展示性的复杂对象”（如配置项、图表数据） 场景：页面中的配置对象（如表单布局配置、图表的 option），结构复杂但运行中不会修改嵌套属性，只会整体替换。 问题：深层响应性会对嵌套的每个对象 / 数组创建 Proxy，而这些 Proxy 完全用不上，属于浪费。 解决方案：用shallowReactive（对象）或shallowRef（整体替换）：

1
import { shallowReactive } from 'vue'
2
// 复杂配置对象，仅用于展示，不修改内部属性
3
const chartOptions = shallowReactive({
4
  xAxis: { type: 'category' },
5
  series: [{ data: [1, 2, 3] }]
6
})
7

8
// ✅ 有效：修改顶层属性会触发更新（如果需要）
9
chartOptions.xAxis = { type: 'value' }
10

11
// ❌ 无效：修改嵌套属性不触发更新（业务不需要）
12
chartOptions.series[0].data.push(4)

手动控制更新时机（避免频繁触发） 场景：需要批量修改数据，且希望 “修改完所有内容后再统一更新 DOM”，而不是每改一个属性就更新一次。 问题：普通响应式会在每次修改时触发更新，批量操作时可能导致多次无用渲染。 解决方案：用shallowRef配合triggerRef（手动触发更新）：

1
import { shallowRef, triggerRef } from 'vue'
2
const formData = shallowRef({ name: '', age: 0 })
3

4
// 批量修改（不会触发更新）
5
formData.value.name = '张三'
6
formData.value.age = 20
7
// ...更多修改
8

9
// 手动触发一次更新（减少渲染次数）
10
triggerRef(formData)

不适用场景：警惕 “过度优化” 浅层响应性的 “性能优化” 是有代价的 —— 丢失了深层追踪能力，因此以下场景绝对不能用：

• 数据需要修改嵌套属性（如用户信息对象{ user: { name: ‘xxx’ } }，需要修改name）；
• 数据结构简单（如仅包含 1-2 层的小对象），此时深层响应性的性能开销可忽略，没必要用浅层；
• 新手对响应式原理不熟悉，容易因 “修改不触发更新” 导致 bug。

浅层响应性是 “按需关闭深层追踪” 的优化手段，核心适用场景是： 数据结构复杂但仅需整体替换，或嵌套属性完全不需要修改。 它的设计不是为了 “替代” 普通响应式，而是在特定场景下（如处理大型数据）减少不必要的性能消耗，属于 “进阶优化技巧”，需结合具体业务判断是否使用。