各位 Vue 开发者，在实际项目的复杂业务场景中，你是否在使用 ref 和 reactive 是遇到过性能瓶颈或者状态更新异常的状况？你更倾向于使用哪种方式来管理数据状态呢？不妨在评论区分享你的实战经历，让我们一起探索更高效的状态管理之道！

一、响应式核心的深度解码

在 Vue3 的响应式系统里，ref 和 reactive 如同两位身怀绝技的武林高手，各自有着独特的看家本领。

ref 像是一位全能保镖，无论数据是基本类型（如数字、字符串）还是对象类型，它都会用.value属性将数据严密保护起来，确保数据的响应式特性。

javascriptimport { ref } from 'vue';

// 基本类型数据
const count = ref(0);
// 对象类型数据
const user = ref({ name: 'Alice' });

// 访问和修改基本类型数据
count.value++; 
// 访问和修改对象属性
user.value.name = 'Bob';

从技术原理上来说，ref 内部会创建一个包含value属性的对象，当这个value属性发生变化时，Vue 的响应式系统会追踪到这个变化并更新与之绑定的 DOM 元素。

reactive 则像是一位精通奇门遁甲的谋士，专为复杂对象结构量身定制，能够实现深度响应。

import { reactive } from 'vue';

const state = reactive({
  counter: 0,
  userInfo: {
    name: 'Charlie',
    age: 25
  }
});

// 直接访问和修改属性
state.counter++;
state.userInfo.age = 26;

reactive 利用了 JavaScript 的 Proxy 对象，对对象的属性访问和修改进行拦截，当对象的属性发生变化时，响应式系统会自动更新相关的视图。

二、选择恐惧症的终极解决方案

在实际开发中，如何选择合适的响应式 API 是一个关键问题，下面结合具体业务场景给出详细的选择策略。

基础类型数据：无脑选择 ref

在处理简单的状态，如开关状态、计数器数值等，使用 ref 是最简单直接的方式。

import { ref } from 'vue';

// 开关状态
const isOpen = ref(false);
// 计数器
const counter = ref(0);

对象 / 数组结构

• 需要整体替换：当需要对对象或数组进行整体替换时，使用 ref 更为合适。例如，在一个电商应用中，需要根据用户的选择切换不同的商品列表。

import { ref } from 'vue';

// 商品列表
const productList = ref([
  { id: 1, name: 'Product A' },
  { id: 2, name: 'Product B' }
]);

// 根据用户选择切换商品列表
const newProductList = [
  { id: 3, name: 'Product C' },
  { id: 4, name: 'Product D' }
];
productList.value = newProductList;

• 仅修改属性：如果只是对对象的属性进行修改，使用 reactive 可以更方便地实现深度响应。例如，在一个用户信息管理系统中，修改用户的年龄。

import { reactive } from 'vue';

const user = reactive({
  name: 'John',
  age: 30
});

// 修改用户年龄
user.age = 31;

组合式函数：优先返回 ref 保证解构后的响应性

在组合式函数中，为了确保返回的数据在解构后仍然保持响应性，建议优先返回 ref。

import { ref } from 'vue';

function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  const updatePosition = (event) => {
    x.value = event.pageX;
    y.value = event.pageY;
  };

  window.addEventListener('mousemove', updatePosition);

  return { x, y };
}

// 在组件中使用
const { x, y } = useMousePosition();

三、实战中的避坑秘籍

在实际开发过程中，即使是经验丰富的开发者也可能会在使用 ref 和 reactive 时踩坑，下面详细介绍一些常见的误区及解决方案。

典型误区：直接解构 reactive 对象

直接解构 reactive 对象会导致失去响应性，这是因为解构操作会创建新的变量，这些变量不再与原始的响应式对象关联。

import { reactive, toRefs } from 'vue';

const state = reactive({ a: 1, b: 2 });
//  失去响应性！
let { a, b } = state; 

// 正确姿势
// 方法一：使用ref包裹
const aRef = ref(state.a); 
const bRef = ref(state.b);
// 方法二：使用toRefs
const { a: toRefA, b: toRefB } = toRefs(state);

性能优化：大数组处理时，使用 shallowRef 避免深度监听

当处理包含大量数据的数组时，使用 reactive 会对数组中的每个元素进行深度监听，这会消耗大量的性能。此时，可以使用 shallowRef 只对数组的引用进行监听，而不监听数组内部元素的变化。

import { shallowRef } from 'vue';

// 模拟10万条数据
const bigData = shallowRef(Array.from({ length: 100000 }, (_, i) => i));

// 更新数组引用
const newBigData = bigData.value.map(item => item + 1);
bigData.value = newBigData;

四、最佳实践路线图

在不同的开发场景中，合理运用 ref 和 reactive 可以提高代码的可读性和可维护性，下面介绍一些最佳实践。

组件内部状态管理优先使用 reactive

在组件内部，使用 reactive 可以更方便地管理复杂的状态。例如，在一个购物车组件中，管理商品列表和总价。

import { reactive } from 'vue';

export default {
  setup() {
    const cart = reactive({
      items: [
        { id: 1, name: 'Product A', price: 10 },
        { id: 2, name: 'Product B', price: 20 }
      ],
      totalPrice: 0
    });

    const updateTotalPrice = () => {
      cart.totalPrice = cart.items.reduce((total, item) => total + item.price, 0);
    };

    return {
      cart,
      updateTotalPrice
    };
  }
};

跨组件传递值使用 ref

在跨组件传递数据时，使用 ref 可以确保数据的响应式特性。例如，在父组件和子组件之间传递一个计数器的值。

// 父组件
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  setup() {
    const counter = ref(0);

    return {
      counter
    };
  },
  components: {
    ChildComponent
  }
};

// 子组件
import { defineProps } from 'vue';

export default {
  props: {
    counter: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    return {
      props
    };
  }
};

表单处理推荐 reactive 嵌套 ref

在处理表单数据时，使用 reactive 嵌套 ref 可以方便地实现表单数据的双向绑定。

import { reactive, ref } from 'vue';

const form = reactive({
  username: ref(''),
  password: ref('')
});

// 表单提交处理
const handleSubmit = () => {
  console.log('Username:', form.username.value);
  console.log('Password:', form.password.value);
};

你在使用 ref 和 reactive 时是否有过独特的实战经验或者遇到过一些难以解决的问题？欢迎在评论区分享你的故事和解决方案。如果你觉得本文对你有帮助，不妨点个收藏，转发给正在学习 Vue3 的小伙伴们，让更多人受益！