当前位置：首页 > news >正文

ref存储对象和reactive深度响应式递归地对对象的嵌套属性进行响应式处理

news 2025/8/7 6:46:39

ref 不会递归地对对象或数组中的每个属性或元素进行深度响应式处理。如果你需要递归处理嵌套属性，reactive 是更适合的选择。让我通过具体的例子来展示这一点。

例子：`ref` 存储对象和嵌套对象

1. 使用 `ref` 存储嵌套对象：

import { createApp, ref } from 'vue';createApp({setup() {// 使用 ref 存储对象，包含嵌套属性const user = ref({name: 'Alice',profile: {age: 25,address: 'New York'}});// 修改嵌套属性function updateUser() {user.value.profile.age = 26; // 修改嵌套对象的属性}return {user, // 返回 user 对象给模板updateUser};}
}).mount('#app');

模板部分：

<div id="app"><p>Name: {{ user.value.name }}</p><p>Age: {{ user.value.profile.age }}</p><button @click="updateUser">Update Age</button>
</div>

问题：

在这个例子中，ref 用于存储一个对象，对象内有一个嵌套的 profile 对象。user.value.profile.age 是嵌套属性，它应该是响应式的。但问题在于，ref 不会递归地对嵌套对象进行响应式处理。user.value.profile 并不是深度响应式的，而是浅响应式的。

这意味着，当你修改 user.value.profile.age 时，Vue 不会自动更新视图，因为 profile 对象没有被 深度响应式化。

解决方法：

如果我们希望 profile 对象的嵌套属性（如 age 和 address）也能触发视图更新，我们需要通过 reactive 来深度响应式化这个对象。

2. 使用 `reactive` 存储嵌套对象：

import { createApp, reactive } from 'vue';createApp({setup() {// 使用 reactive 创建深度响应式对象const user = reactive({name: 'Alice',profile: {age: 25,address: 'New York'}});// 修改嵌套属性function updateUser() {user.profile.age = 26; // 修改嵌套对象的属性}return {user, // 返回 user 对象给模板updateUser};}
}).mount('#app');

模板部分：

<div id="app"><p>Name: {{ user.name }}</p><p>Age: {{ user.profile.age }}</p><button @click="updateUser">Update Age</button>
</div>

解释：

在这个例子中，reactive 用来将 user 对象及其内部属性（如 profile）深度响应式化。
现在，修改 user.profile.age 时，profile 对象 和 age 属性 都是 深度响应式的，因此视图会自动更新。

总结：

ref 存储对象或数组时，它只会 创建响应式引用，不会递归地对对象的嵌套属性进行响应式处理。你需要使用 .value 来访问和修改对象的内容。如果对象有嵌套的属性，ref 无法保证它们是响应式的，除非显式地使用 reactive。
reactive 会对对象及其所有 嵌套属性 进行深度响应式处理，无需使用 .value，并且修改嵌套属性时视图会自动更新。