ref() 和 reactive()相应性 浅解

在 Vue 3 中，ref() 和 reactive() 都是用于相应式数据管理的 API，它们的重要作用是让数据具有相应性，使 Vue 组件在数据变革时可以大概自动更新视图。它们有肯定的关联，但用法和实用场景有所差别。

---

1. ref() 和 reactive() 的区别

对比点ref()reactive()实用场景实用于根本范例（Number、String、Boolean）和对象实用于对象（Object、Array、Map、Set等）是否须要 .value须要：count.value不须要，直接访问属性：state.count是否可以解构不能直接解构，会丢失相应性不能直接解构，会丢失相应性实用于数组/对象实用于恣意范例的数据，但访问对象时须要 .value实用于复杂的对象和数组底层实现ref 内部利用 reactive 处置惩罚对象利用 Proxy 署理对象，实现相应性

---

2. 解构 详解

情况示例是否丢失相应性？缘故原由办理方案ref(根本范例)const count = ref(0);
count.value++✅ 不会count 本身是 ref，Vue 追踪 count.value直接 count.value++ref(对象范例) 并直接修改 .valueconst user = ref({ name: 'Alice' });
user.value.name = 'Bob';✅ 不会user.value 仍旧是相应式对象直接修改 user.value.name解构 ref(对象).valueconst { name } = user.value;
name = 'Bob';❌ 会丢失name 是寻常变量，Vue 不再追踪利用 toRefs(user.value)解构 reactive(对象)const user = reactive({ name: 'Alice' });
const { name } = user;
name = 'Bob';✅ 不会reactive 天生的是 Proxy，解构后仍旧保持相应性直接解构 const { name } = user;reactive 对象包罗 ref()const user = reactive({ name: ref('Alice') });
user.name = 'Bob';✅ 不会user.name 是 ref，Vue 能追踪 user.name.value访问 user.name.valuereactive 里存 ref 并解构const user = reactive({ name: ref('Alice') });
const { name } = user;
name = 'Bob';❌ 会丢失name 变成 ref，但解构后 Vue 不会追踪 name.value改为 toRef(user, 'name')解构 reactive() 并利用 toRefs()const user = reactive({ name: 'Alice' });
const { name } = toRefs(user);✅ 不会toRefs() 把 user.name 转换为 ref，仍旧相应式继承 name.value = 'Bob'2.1. 什么是解构

解构是 JavaScript用于从对象或数组中提取值的语法，答应你将数据拆分并存储到独立的变量中。
看个例子，一眼便知

1. <script setup>
2. import { reactive } from 'vue';
4. const state = reactive({
5.   count: 0,
6.   message: 'Hello'
7. });
9. // ❌ 直接解构（会丢失响应性）
10. let { count, message } = state;
12. const increment = () => {
13.   count++; // ❌ 这里不会触发视图更新
14. };
15. </script>
17. <template>
18.   <p>{{ count }}</p> <!-- 不会更新 -->
19.   <button @click="increment">+</button>
20. </template>

复制代码

2.2. 解构克制丢失相应性的办法

在 Vue 3 中，reactive() 返回的对象在解构后会丢失相应性，这是由于 reactive() 利用的是 Proxy，而解构时只会拷贝属性值，而不会保存 Proxy 署理本领。
2.2.1. 办理方案：toRefs() 保持相应性

• toRefs(state) 把 state 的每个属性变成 ref()，如许解构出来的 count 和 message 就是 ref，修改 .value 仍旧会触发 Vue 的相应式体系。
  

toRefs() 用于将 reactive 对象的属性转换成 ref，如许解构后仍旧保持相应性：

1. <script setup>
2. import { reactive, toRefs } from 'vue';
4. const state = reactive({
5.   count: 0,
6.   message: 'Hello'
7. });
9. // ✅ 使用 toRefs() 让解构后的变量仍保持响应性
10. const { count, message } = toRefs(state);
12. const increment = () => {
13.   count.value++; // ✅ 这里会触发视图更新
14. };
15. </script>
17. <template>
18.   <p>{{ count }}</p> <!-- 视图会更新 -->
19.   <button @click="increment">+</button>
20. </template>

复制代码

2.2.2. 办理方案： toRef()保持相应性

假如你只想让某个属性保持相应性，而不是整个 state，可以利用 toRef()：

1. <script setup>
2. import { reactive, toRef } from 'vue';
4. const state = reactive({
5.   count: 0,
6.   message: 'Hello'
7. });
9. // ✅ 只把 count 变成 ref
10. const count = toRef(state, 'count');
12. const increment = () => {
13.   count.value++; // ✅ 仍然是响应式的
14. };
15. </script>
17. <template>
18.   <p>{{ count }}</p>
19.   <button @click="increment">+</button>
20. </template>

复制代码

3. 最佳实践

• 根本范例 ➝ ref()
  
• 对象 ➝ reactive()
  
• 解构 reactive ➝ 用 toRefs()
  
• 解构 ref(对象).value ➝ 不能直接解构，必须用 toRefs()