Vue3响应式高阶用法之shallowReactive()

訾博ZiBo

发布于 2025-01-06 20:42:38

11000

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

Vue3响应式高阶用法之shallowReactive()

注意点：一般不用reactive了，一般都用ref！这个仅作了解即可！

一、简介

在Vue3中，响应式系统是其核心特性之一。shallowReactive()是Vue3提供的一种高阶响应式API，它与reactive()类似，但有着显著的区别。本文将详细介绍shallowReactive()的使用场景、基本用法、功能详解、最佳实践及案例，帮助读者更好地理解和应用这一特性。

二、使用场景

shallowReactive()适用于以下场景：

性能优化：当业务场景中有大量复杂数据结构，但只有顶层引用需要响应式时。
浅层响应：只关心对象顶层属性的变化，而不需要对对象内部的属性进行深度响应式处理。

三、基本使用

shallowReactive()的使用非常简单，以下是一个基本示例：

<script lang="ts" setup>
  import { shallowReactive, isReactive } from 'vue';

  // 创建一个浅层响应式对象
  const state = shallowReactive({
    foo: 1,
    nested: {
      age: 18,
    },
  });

  state.foo++;  // 更改顶层属性是响应式的

  // 检查嵌套对象是否是响应式的
  console.log(isReactive(state.nested)); // 输出: false

  state.nested.age++;  // 更改嵌套对象的属性不会触发响应式更新
</script>

在上述代码中，state是一个浅层响应式对象，只有顶层属性foo是响应式的，而嵌套对象nested中的属性age不是响应式的。

四、功能详解

4.1 浅层响应

shallowReactive()只会对对象的顶层属性进行响应式处理，不会递归处理嵌套对象。这意味着当顶层属性发生变化时，Vue的响应式系统会捕捉到并触发相应的更新，但嵌套对象的属性变化不会触发更新。

4.2 性能优势

由于shallowReactive()不对嵌套对象进行深度响应式处理，因此在处理复杂数据结构时，可以减少性能开销。这对于需要处理大量数据且只关心顶层数据变化的场景尤为有用。

五、最佳实践及案例

5.1 复杂数据结构处理

在处理复杂数据结构时，使用shallowReactive()可以显著提高性能。例如，在一个大型表单中，如果只关心表单项的顶层状态变化，可以使用shallowReactive()来避免不必要的深度响应式处理。

<script lang="ts" setup>
  import { shallowReactive } from 'vue';

  // 创建一个复杂数据结构的浅层响应式对象
  const formData = shallowReactive({
    name: 'John Doe',
    address: {
      city: 'New York',
      zip: '10001',
    },
    preferences: {
      newsletter: true,
      notifications: false,
    },
  });

  // 更改顶层属性
  formData.name = 'Jane Doe';  // 响应式更新

  // 更改嵌套对象属性
  formData.address.city = 'Los Angeles';  // 非响应式更新
</script>

5.2 确保正确的响应式转换

在使用shallowReactive()时，需要注意对象的更新逻辑，确保在需要时正确地应用响应式转换。如果某些嵌套对象属性需要响应式处理，可以手动将其转换为响应式对象。

<script lang="ts" setup>
  import { shallowReactive, reactive } from 'vue';

  const state = shallowReactive({
    foo: 1,
    nested: {
      age: 18,
    },
  });

  // 手动将嵌套对象转换为响应式对象
  state.nested = reactive(state.nested);

  // 现在嵌套对象的属性变化也会触发响应式更新
  state.nested.age++;
</script>