您现在的位置是：首页 >技术杂谈 >Vue3中响应式Reactive的独特之处：它在哪些场景下胜出Ref？网站首页技术杂谈

✅创作者：陈书予
?个人主页：陈书予的个人主页
?陈书予的个人社区，欢迎你的加入: 陈书予的社区
?专栏地址: 三十天精通 Vue 3

一、Vue 3中响应式Reactive的独特之处

1.1 引言

在Vue 3中，响应式系统是Vue的核心特性之一。它通过Reactive和Ref这两种方式来处理响应式数据，为开发者提供了便利的数据管理和自动更新的能力。本文将重点介绍Vue 3中Reactive的独特之处以及与Ref的对比。

1.2 Vue 3中的响应式系统简介

Vue 3的响应式系统基于Proxy代理对象实现，它能够自动追踪数据的依赖关系，并在数据变化时自动更新相关的视图。Vue 3的响应式系统具有以下特点：

• 自动依赖追踪：当访问响应式数据时，Vue 3会自动追踪该数据的依赖关系，建立起一个依赖图谱。
• 惰性求值：响应式数据只有在真正需要访问时才会进行求值和依赖追踪，从而提高性能。
• 深层监听：Vue 3的响应式系统支持对嵌套对象或数组中的属性进行深层监听，使得处理复杂数据结构更加便捷。
• 批量更新：Vue 3通过批量更新机制优化性能，将对同一个响应式对象的多次修改合并为一次更新。

二、Vue 3中的Reactive

2.1 使用Reactive创建响应式数据

2.1.1 创建简单的响应式数据

在Vue 3中，可以使用reactive函数将普通的JavaScript对象转换为响应式数据。以下是一个示例：

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello, Vue 3!'
})

在上述示例中，我们使用reactive函数将一个普通的对象转换为响应式数据state。现在，state对象的count和message属性具有响应性，任何对它们的修改都会自动触发相关的更新。

2.1.2 创建嵌套的响应式数据

除了简单的对象，reactive函数还可以处理嵌套的对象和数组。以下是一个示例：

import { reactive } from 'vue'

const nestedState = reactive({
  user: {
    name: 'John',
    age: 25
  },
  todos: [
    { id: 1, text: 'Learn Vue 3', done: false },
    { id: 2, text: 'Build an app', done: true }
  ]
})

在上述示例中，我们使用reactive函数将一个包含嵌套对象和数组的普通对象转换为响应式数据nestedState。现在，nestedState对象的user属性和todos属性以及它们内部的属性都具有响应性。

2.2 响应式数据的特性

2.2.1 响应式数据的自动依赖追踪

在Vue 3中，当访问响应式数据时，系统会自动追踪该数据的依赖关系。这意味着，当响应式数据发生变化时，依赖于该数据的相关部分会自动更新。例如，以下示例展示了依赖追踪的效果：

import { reactive, watchEffect } from 'vue'

const state = reactive({
  count: 0,
  double: 0
})

watchEffect(() => {
  state.double = state.count * 2
})

state.count = 5 // 触发依赖更新，state.double的值将自动更新为10

在上述示例中，我们使用watchEffect函数创建了一个响应式的副作用函数。该函数依赖于state.count，并在state.count发生变化时更新state.double的值。

2.2.2 响应式数据的惰性求值

Vue 3的响应式系统采用惰性求值的策略，只有在真正需要访问响应式数据时才会进行求值和依赖追踪。这意味着，当响应式数据在某些条件下不被访问时，不会触发不必要的求值和更新。这种策略有助于提高性能和减少不必要的计算。

2.2.3 响应式数据的深层监听

Vue 3的响应式系统支持对嵌套对象或数组中的属性进行深层监听。这意味着，在修改嵌套对象或数组中的属性时，系统会自动追踪并更新相关的依赖关系。以下示例展示了深层监听的效果：

import { reactive, watchEffect } from 'vue'

const nestedState = reactive({
  user: {
    name: 'John',
    age: 25
  }
})

watchEffect(() => {
  console.log(nestedState.user.name)
})

nestedState.user.name = 'Alice' // 输出 'Alice'

在上述示例中，我们创建了一个嵌套对象nestedState，并在watchEffect函数中监听nestedState.user.name的变化。当修改nestedState.user.name时，系统会自动触发依赖更新并输出新的值。

2.2.4 响应式数据的批量更新

Vue 3的响应式系统通过批量更新机制优化性能。当多次对同一个响应式对象进行修改时，系统会将这些修改合并为一次更新，从而减少不必要的更新操作。这种批量更新机制可以提高性能并减少界面的闪烁。

2.3 响应式数据的局限性

2.3.1 响应式数据的增删操作

由于Vue 3的响应式系统是基于Proxy实现的，它对于属性的增删操作并不是响应式的。这意味着，当直接对响应式对象进行属性的增删操作时，不会触发相关的更新。为了解决这个问题，Vue 3提供了一些API，如Vue.set和Vue.delete，用于操作响应式对象的属性。

2.3.2 响应式数据的性能考虑

尽管Vue 3的响应式系统在大多数情况下都能提供良好的性能，但在处理大规模数据和复杂数据结构时，需要注意性能方面的考虑。深层嵌套的对象和数组会增加响应式系统的追踪和更新的开销，可能导致性能下降。在这种情况下，可以考虑使用Ref来处理简单的数据类型或单一属性，以提高性能。

三、Vue 3中的Ref

3.1 使用Ref创建响应式数据

3.1.1 创建简单的响应式数据

在Vue 3中，可以使用ref函数创建一个包装对象，将普通的数据类型转换为响应式数据。以下是一个示例：

import { ref } from 'vue'

const count = ref(0)

在上述示例中，我们使用ref函数将数字0转换为响应式数据count。现在，count具有响应性，并可以在模板中直接使用。

3.1.2 创建包装对象的响应式数据

除了简单的数据类型，ref函数还可以创建包装对象的响应式数据。以下是一个示例：

import { ref } from 'vue'

const user = ref({
  name: 'John',
  age: 25
})

在上述示例中，我们使用ref函数将一个包含name和age属性的对象转换为响应式数据user。现在，user对象以及它的属性都具有响应性。

3.2 Ref与Reactive的对比

3.2.1 响应式数据的类型转换

Ref创建的响应式数据是一个包装对象，它将原始的数据类型包装在内部，并提供了.value属性来访问和修改值。而Reactive创建的响应式数据是一个响应式的普通对象。

3.2.2 响应式数据的访问方式

Ref创建的响应式数据需要通过.value属性来访问和修改值，而Reactive创建的响应式数据可以直接访问和修改对象的属性。

3.2.3 响应式数据的内部实现

Ref创建的响应式数据是通过Proxy代理对象实现的，而Reactive创建的响应式数据是通过递归遍历对象并使用Proxy代理对象实现的。

四、Reactive与Ref的应用场景

4.1 Reactive的应用场景

4.1.1 复杂数据结构的响应式管理

Reactive适用于处理复杂的数据结构，如嵌套的对象和数组。它可以方便地追踪和更新嵌套数据的变化。

4.1.2 需要深层监听的数据

如果需要对嵌套对象或数组中的属性进行深层监听，Reactive是更好的选择。它能够自动追踪嵌套属性的依赖关系，并在属性变化时自动更新。

4.1.3 自定义的响应式逻辑

Reactive还可以用于自定义的响应式逻辑。通过在getter或setter中添加自定义的逻辑，可以实现更复杂的数据处理和依赖追踪。

4.2 Ref的应用场景

4.2.1 简单数据类型的响应式管理

Ref适用于处理简单的数据类型，如数字、字符串等。它提供了更直接的访问和修改方式，无需使用.value属性。

4.2.2 对象的单一属性的响应式管理

如果只需要对对象的单一属性进行响应式管理，而不需要追踪整个对象的变化，Ref是更合适的选择。

4.2.3 在模板中使用Ref

Ref创建的响应式数据可以直接在模板中使用，而Reactive创建的响应式数据需要通过.value属性来访问。

五、总结

5.1 Reactive与Ref的对比与选择

在Vue 3中，Reactive和Ref是处理响应式数据的两种方式。Reactive适用于处理复杂的数据结构和需要深层监听的数据，而Ref适用于处理简单的数据类型和对象的单一属性。根据具体的应用场景和需求，选择合适的方式可以更好地管理和使用响应式数据。

以上表格对比了Reactive和Ref的特性，包括类型转换、访问方式、内部实现、响应式管理、深层监听、自定义逻辑和在模板中使用等方面的差异。根据这些特性，可以根据具体的需求选择合适的方式来处理响应式数据。