Vue 3 中，使用 ref 和 reactive

在 Vue 3 中，使用 ref 和 reactive 是两种不同的方式来创建响应式数据。选择哪种方式取决于具体的需求和使用场景。下面是这两种方式的区别以及为什么在这个场景中选择 ref 的原因。

ref 和 reactive 的区别

1. ref

   • 适用于基本数据类型（如 number, string, boolean）和对象。
   • 访问值时需要通过 .value 属性。
   • 返回的是一个包装对象，这个对象有一个 .value 属性指向实际的数据。

2. reactive

   • 适用于对象。
   • 直接访问对象的属性，不需要 .value。
   • 返回的是一个响应式的代理对象。

为什么在这个场景中选择 ref

在这个特定的场景中，categorizedData 是一个对象，存储不同数据源的数据。虽然 reactive 更适合直接操作对象，但在某些情况下，ref 也有其优势：

1. 一致性

   • 如果你在其他地方也使用 ref 来管理响应式数据，保持一致性可以减少混淆。

2. 灵活性

   • 使用 ref 可以更灵活地处理数据，特别是在需要重新赋值整个对象时。

3. 简化逻辑

   • 在某些情况下，使用 ref 可以简化逻辑，尤其是在需要重置或重新赋值整个对象时。

示例代码

以下是使用 ref 和 reactive 的对比示例：

使用 ref

import { defineComponent, ref, onMounted } from 'vue';
import axios from 'axios';
import QichachaComponent from './QichachaComponent.vue';
import TianyanchaComponent from './TianyanchaComponent.vue';
import QixinbaoComponent from './QixinbaoComponent.vue';

export default defineComponent({
  components: {
    QichachaComponent,
    TianyanchaComponent,
    QixinbaoComponent,
  },
  setup() {
    const categorizedData = ref({});

    const fetchSupplierData = async () => {
      try {
        const response = await axios.get(`/api/supplier-data/1001`);
        const supplierData = response.data;

        // 分类数据
        categorizedData.value = supplierData.reduce((acc, item) => {
          acc[item.dataSource] = acc[item.dataSource] || [];
          acc[item.dataSource].push(item.data);
          return acc;
        }, {});
      } catch (error) {
        console.error('获取供应商数据失败', error);
      }
    };

    onMounted(() => {
      fetchSupplierData();
    });

    return {
      categorizedData,
    };
  },
});

使用 reactive

import { defineComponent, reactive, onMounted } from 'vue';
import axios from 'axios';
import QichachaComponent from './QichachaComponent.vue';
import TianyanchaComponent from './TianyanchaComponent.vue';
import QixinbaoComponent from './QixinbaoComponent.vue';

export default defineComponent({
  components: {
    QichachaComponent,
    TianyanchaComponent,
    QixinbaoComponent,
  },
  setup() {
    const categorizedData = reactive({});

    const fetchSupplierData = async () => {
      try {
        const response = await axios.get(`/api/supplier-data/1001`);
        const supplierData = response.data;

        // 分类数据
        supplierData.forEach(item => {
          if (!categorizedData[item.dataSource]) {
            categorizedData[item.dataSource] = [];
          }
          categorizedData[item.dataSource].push(item.data);
        });
      } catch (error) {
        console.error('获取供应商数据失败', error);
      }
    };

    onMounted(() => {
      fetchSupplierData();
    });

    return {
      categorizedData,
    };
  },
});

总结

• ref 适用于需要重新赋值整个对象的情况，或者在需要保持一致性和灵活性的情况下。
• reactive 适用于直接操作对象属性的情况，更加简洁和直观。

在这个场景中，选择 ref 主要是因为它提供了更好的灵活性和一致性，特别是在需要重新赋值整个对象时。当然，如果你更喜欢使用 reactive，也可以根据实际情况进行调整。