【双剑合璧】Vue3的ref和reactive要如何抉择？

前言

在Vue的江湖里，ref和reactive就像武林中的倚天剑和屠龙刀，各有千秋，各有所长。但问题来了，为啥Vue要给我们出这样的选择题？难道是为了考验我们的智慧？还是说，Vue的大侠们就喜欢看着我们纠结的样子？非也非也，这背后其实隐藏着Vue的响应式设计哲学。今天，我们就来揭开这层神秘的面纱，看看在Vue的世界里，如何做到“剑走偏锋，刀行厚重”，用最恰当的方式，让数据响应起来。

ref与reactive

在Vue的响应式系统中，ref和reactive是两大支柱。ref就像一个细心的管家，无论你是基本数据类型还是复杂的对象，它都能给你包裹得严严实实，确保你的数据变化能够被系统准确捕捉。而reactive则更像是一位剑客，它专注于对象类型的数据，以极其敏锐的洞察力，捕捉每一个属性的变动。

ref - 细心的管家

// 创建一个基本类型的响应式引用
const count = ref(0);

// 创建一个对象类型的响应式引用
const person = ref({ name: 'John Doe', age: 30 });

reactive - 敏锐的剑客

// 创建一个对象类型的响应式代理
const state = reactive({
  count: 0,
  person: { name: 'John Doe', age: 30 }
});

选择之道：何时用ref？何时用reactive？

选择使用ref还是reactive，关键在于你的数据结构和使用场景。如果你的数据是基本数据类型，那么ref是不二之选。如果你的数据是对象，并且你主要关心对象属性的变化，那么reactive将是你的好帮手。但如果你的对象可能会被重新赋值，那么ref将更加稳妥。

响应式数据的增与减

<template>
  <div>
    <p>Count: {{ count.value }}</p>
    <button @click="increment">Increment</button>
    <p>Person: {{ person.value.name }}, {{ person.value.age }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const increment = () => {
      count.value++;
    };

    const person = ref({ name: 'John Doe', age: 30 });
    const updatePerson = () => {
      person.value.age++;
    };

    return {
      count,
      increment,
      person,
      updatePerson
    };
  }
};
</script>

在这个示例中，我们创建了两个响应式引用：一个基本类型的count和一个对象类型的person。通过点击按钮，我们可以更新count的值，同时也能更新person对象中的age属性。这就是Vue响应式系统的魔力所在。

总结

通过这篇文章，我们发现，无论是ref还是reactive，它们都是Vue响应式系统的重要组成部分。选择使用哪一个，并不是非此即彼的问题，而是根据具体的数据类型和使用场景来决定。ref像一个多功能的盾，能够保护各种类型的数据；而reactive则像一把锋利的剑，专注于对象属性的精准捕捉。

在实际开发中，我的经验是，先用ref包裹数据，因为它简单且通用。如果后续发现数据结构是对象，并且需要更细致的属性变化监听，再考虑使用reactive。这样的做法，既能保证开发的灵活性，又能确保响应式系统的高效运行。

Vue的响应式系统设计得非常精妙，它让我们能够以声明式的方式处理数据变化，极大地提高了开发效率。理解了ref和reactive的内在逻辑，你就能在Vue的世界里游刃有余，成为一名真正的Vue高手。

记住，无论是剑走偏锋还是刀行厚重，关键在于如何根据实际情况，选择最合适的工具。在Vue的世界里，ref和reactive都是你的利剑和坚盾，用好它们，你将无往不胜。