Vue3中的Ref和Reactive

Vue3 中 ref 与 reactive 完整教程

一、核心概念与基本用法

1. ref 的作用与实现

   • 用途：创建响应式数据，适用于基本类型（如 number、string、boolean）或需要保持引用的对象/数组。
   • 实现原理：通过 Object.defineProperty 包装基本类型，或借助 reactive 的 Proxy 处理对象。
   • 示例：

     import { ref } from 'vue';
     const count = ref(0); // 基本类型
     const user = ref({ name: 'Alice' }); // 对象类型
     console.log(count.value); // 访问值需用 .value
     user.value.name = 'Bob'; // 修改对象属性
     

2. reactive 的作用与实现

   • 用途：创建响应式对象，适用于复杂数据结构（如嵌套对象、数组）。
   • 实现原理：基于 Proxy 代理对象，递归监听所有属性变化。
   • 示例：

     import { reactive } from 'vue';
     const state = reactive({
       count: 0,
       profile: { name: 'Alice' }
     });
     state.count++; // 直接修改属性
     state.profile.name = 'Bob'; // 深层嵌套仍响应
     

二、对比表格：ref vs reactive

三、应用场景与实例

1. ref 的典型场景

   • 计数器：

     const count = ref(0);
     const increment = () => count.value++;
     

   • 表单开关：

     const isModalOpen = ref(false);
     

2. reactive 的典型场景

   • 用户信息管理：

     const user = reactive({
       name: 'Alice',
       address: { city: 'Beijing' }
     });
     

   • 复杂表单状态：

     const formState = reactive({
       fields: [{ label: '用户名', value: '' }],
       isValid: false
     });
     

3. 联合使用示例

   import { ref, reactive, toRefs } from 'vue';
   const globalCount = ref(0); // 独立计数器
   const userProfile = reactive({ // 复杂用户数据
     name: 'Alice',
     preferences: { theme: 'dark' }
   });
   // 解构保持响应性
   const { name, preferences } = toRefs(userProfile);
   

四、进阶技巧

1. toRefs 解构响应对象

   const state = reactive({ count: 0 });
   const { count } = toRefs(state); // 解构后仍响应
   

2. 性能优化建议

   • 避免频繁操作 ref.value（如循环中），优先批量更新。
   • 深层 reactive 对象可能影响性能，必要时使用 shallowReactive。

五、总结

• 简单数据用 ref：如计数器、开关状态，需通过 .value 操作。
• 复杂对象用 reactive：如表单、嵌套数据，直接操作属性更简洁。
• 混合使用：结合 ref 管理独立状态，reactive 处理复杂逻辑，提升代码可维护性。