vue3 shallowReactive与shallowRef

Vue 3 shallowReactive 与 shallowRef

在 Vue 3 的 Composition API 中，shallowReactive 和 shallowRef 是两个用于处理响应式数据的函数。它们与 reactive 和 ref 类似，但有一个重要的区别：shallowReactive 和 shallowRef 只会对对象或数组的第一层进行响应式处理，而不会递归处理嵌套的属性。

shallowReactive

shallowReactive 函数用于创建一个浅层响应式对象，只会对对象的第一层属性进行响应式处理。这意味着当对象的嵌套属性发生变化时，Vue 不会跟踪和触发更新。这在某些情况下可以提高性能并避免不必要的更新。

下面是 shallowReactive 的使用方法：

代码语言：javascript复制

import { shallowReactive } from 'vue';

const state = shallowReactive({
  name: 'John',
  age: 25,
  hobbies: ['reading', 'playing']
});

// 对第一层属性进行修改
state.name = 'Alice';
state.age = 30;

// 对嵌套属性进行修改，不会触发更新
state.hobbies.push('running');

在上面的示例中，我们使用 shallowReactive 创建了一个浅层响应式对象 state。当我们修改 name 和 age 这两个第一层属性时，Vue 会正常跟踪和触发更新。但当我们对 hobbies 这个数组的嵌套属性进行修改时，Vue 不会触发更新。

shallowRef

shallowRef 函数用于创建一个包装器，将一个普通的值包装成一个浅层响应式对象。与 shallowReactive 类似，shallowRef 只会对包装对象的第一层进行响应式处理。当包装对象的值发生变化时，Vue 会触发更新。

下面是 shallowRef 的使用方法：

代码语言：javascript复制

import { shallowRef } from 'vue';

const count = shallowRef(0);

// 修改包装对象的值
count.value = 1;

在上面的示例中，我们使用 shallowRef 创建了一个包装器 count，将初始值 0 包装成一个浅层响应式对象。当我们修改 count.value 的值时，Vue 会触发更新。

注意事项

使用 shallowReactive 和 shallowRef 时，需要注意以下几点：

shallowReactive 和 shallowRef 只会对对象或数组的第一层属性进行响应式处理，不会递归处理嵌套的属性。
如果需要对嵌套属性进行响应式处理，应该使用 reactive 和 ref。

0 人点赞