loyalvi
02 响应式基础
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

02 响应式基础

声明响应式状态

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回。
要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们。
注意，在模板中使用 ref 时，我们不需要附加 .value。在模板中使用时，ref 会自动解包。

script setup

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。可以使用单文件组件 (SFC) 的 <script setup> 来大幅度地简化代码。
<script setup> 中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。

为什么要使用 ref？

  • 当你在模板中使用了一个 ref，然后改变了这个 ref 的值时，Vue 会自动检测到这个变化，并且相应地更新 DOM。这是通过一个基于依赖追踪的响应式系统实现的。当一个组件首次渲染时，Vue 会追踪在渲染过程中使用的每一个 ref。然后，当一个 ref 被修改时，它会触发追踪它的组件的一次重新渲染。
    该 .value 属性给予了 Vue 一个机会来检测 ref 何时被访问或修改。在其内部，Vue 在它的 getter 中执行追踪，在它的 setter 中执行触发。
  • 与普通变量不同，你可以将 ref 传递给函数，同时保留对最新值和响应式连接的访问。当将复杂的逻辑重构为可重用的代码时，这将非常有用。
    Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。

深层响应性

Ref 可以持有任何类型的值，包括深层嵌套的对象、数组或者 JavaScript 内置的数据结构，比如 Map。
Ref 会使它的值具有深层响应性。这意味着即使改变嵌套对象或数组时，变化也会被检测到：

1
2
3
4
5
6
7
8
9
10
import { ref } from 'vue'
const obj = ref({
  nested: { count: 0 },
  arr: ['foo', 'bar']
})
function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++
  obj.value.arr.push('baz')
}

非原始值将通过 reactive() 转换为响应式代理，也可以通过shallow ref来放弃深层响应性。对于浅层 ref，只有 .value 的访问会被追踪。浅层 ref 可以用于避免对大型数据的响应性开销来优化性能、或者有外部库管理其内部状态的情况。

DOM 更新时机

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。
要等待 DOM 更新完成后再执行额外的代码，可以使用nextTick()

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

reactive()

与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

1
2
3
4
5
import { reactive } from 'vue'
const state = reactive({ count: 0 })
<button @click="state.count++">
  {{ state.count }}
</button>

响应式对象是 JavaScript 代理，其行为就和普通对象一样。不同的是，Vue 能够拦截对响应式对象所有属性的访问和修改，以便进行依赖追踪和触发更新。
reactive() 将深层地转换对象：当访问嵌套对象时，它们也会被 reactive() 包装。当 ref 的值是一个对象时，ref() 也会在内部调用它。与浅层 ref 类似，这里也有一个 shallowReactive() API 可以选择退出深层响应性。

Reactive Proxy vs. Origina

值得注意的是，reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的：

1
2
3
4
const raw = {}
const proxy = reactive(raw)
// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

只有代理对象是响应式的，更改原始对象不会触发更新。因此，使用 Vue 的响应式系统的最佳实践是仅使用你声明对象的代理版本。
为保证访问代理的一致性，对同一个原始对象调用 reactive() 会总是返回同样的代理对象，而对一个已存在的代理对象调用 reactive() 会返回其本身：

1
2
3
4
// 在同一个对象上调用 reactive() 会返回相同的代理
console.log(reactive(raw) === proxy) // true
// 在一个代理上调用 reactive() 会返回它自己
console.log(reactive(proxy) === proxy) // true

这个规则对嵌套对象也适用。依靠深层响应性，响应式对象内的嵌套对象依然是代理：

1
2
3
4
const proxy = reactive({})
const raw = {}
proxy.nested = raw
console.log(proxy.nested === raw) // false

reactive() 的局限性

reactive() API 有一些局限性：

  1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
  2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失： 
    1
    2
    3
    4
    let state = reactive({ count: 0 })
    // 上面的 ({ count: 0 }) 引用将不再被追踪
    // (响应性连接已丢失！)
    state = reactive({ count: 1 })
  3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接： 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const state = reactive({ count: 0 })
    // 当解构时，count 已经与 state.count 断开连接
    let { count } = state
    // 不会影响原始的 state
    count++
    // 该函数接收到的是一个普通的数字
    // 并且无法追踪 state.count 的变化
    // 我们必须传入整个对象以保持响应性
    callSomeFunction(state.count)
    由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

额外的 ref 解包细节

作为 reactive 对象的属性​

一个 ref 会在作为响应式对象的属性被访问或修改时自动解包。换句话说，它的行为就像一个普通的属性：

1
2
3
4
5
6
7
const count = ref(0)
const state = reactive({
  count
})
console.log(state.count) // 0
state.count = 1
console.log(count.value) // 1

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

1
2
3
4
5
const otherCount = ref(2)
state.count = otherCount
console.log(state.count) // 2
// 原始 ref 现在已经和 state.count 失去联系
console.log(count.value) // 1

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

数组和集合的注意事项

与 reactive 对象不同的是，当 ref 作为响应式数组或原生集合类型 (如 Map) 中的元素被访问时，它不会被解包：

1
2
3
4
5
6
const books = reactive([ref('Vue 3 Guide')])
// 这里需要 .value
console.log(books[0].value)
const map = reactive(new Map('count', ref(0)))
// 这里需要 .value
console.log(map.get('count').value)

在模板中解包的注意事项

在模板渲染上下文中，只有顶级的 ref 属性才会被解包。
在下面的例子中，count 和 object 是顶级属性，但 object.id 不是：

1
2
const count = ref(0)
const object = { id: ref(1) }

因此，这个表达式按预期工作：

1
{{ count + 1 }}

但这个不会：

1
{{ object.id + 1 }}

渲染的结果将是 [object Object]1，因为在计算表达式时 object.id 没有被解包，仍然是一个 ref 对象。为了解决这个问题，我们可以将 id 解构为一个顶级属性：

1
2
const { id } = object
{{ id + 1 }}

现在渲染的结果将是 2。
另一个需要注意的点是，如果 ref 是文本插值的最终计算值 (即 {{ }} 标签)，那么它将被解包，因此以下内容将渲染为 1：

1
{{ object.id }}

该特性仅仅是文本插值的一个便利特性，等价于 {{ object.id.value }}。

总结对比表

特性 ref reactive
数据类型 基本类型 + 对象类型 仅对象类型
访问方式 通过 .value 直接访问属性
响应式原理 Object.defineProperty + Proxy Proxy
替换整个对象 支持（直接赋值 .value） 不支持（会失去响应性）
解构响应性 保持响应性 需 toRefs 保持响应性
适用场景 基本类型、需要替换对象的场景 复杂对象、嵌套数据
02 响应式基础
posts/143a682f/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. 02 响应式基础
    1. 声明响应式状态
      1. script setup
      2. 为什么要使用 ref？
      3. 深层响应性
      4. DOM 更新时机
    2. reactive()
      1. Reactive Proxy vs. Origina
      2. reactive() 的局限性
    3. 额外的 ref 解包细节
      1. 作为 reactive 对象的属性
      2. 数组和集合的注意事项
      3. 在模板中解包的注意事项
      4. 总结对比表
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. 02 响应式基础
    1. 声明响应式状态
      1. script setup
      2. 为什么要使用 ref？
      3. 深层响应性
      4. DOM 更新时机
    2. reactive()
      1. Reactive Proxy vs. Origina
      2. reactive() 的局限性
    3. 额外的 ref 解包细节
      1. 作为 reactive 对象的属性
      2. 数组和集合的注意事项
      3. 在模板中解包的注意事项
      4. 总结对比表