如何利用Vue 3的`reactive`与`ref`实现响应式数据？

Vue 3 响应式数据：reactive 与 ref 的深度剖析

大家好，今天我们来深入探讨 Vue 3 中构建响应式数据的核心机制：reactive 和 ref。理解它们的工作原理和使用场景，对于编写高效、可维护的 Vue 应用至关重要。

什么是响应式数据？

在 Vue 中，响应式数据是指当数据发生变化时，依赖于该数据的视图（模板）能够自动更新。这种机制免去了手动操作 DOM 的麻烦，极大地提升了开发效率。Vue 3 通过 reactive 和 ref 提供了强大的响应式系统。

reactive：深度响应式对象

reactive 用于创建深度响应式的对象。这意味着，不仅对象本身的属性，就连嵌套的对象和数组，也会被 Vue 追踪，并在发生改变时触发更新。

使用示例

import { reactive } from 'vue';

const state = reactive({
  name: '张三',
  age: 30,
  address: {
    city: '北京',
    street: '朝阳区'
  },
  hobbies: ['篮球', '游泳']
});

console.log(state.name); // 输出: 张三

state.name = '李四'; // 视图会自动更新
state.address.city = '上海'; // 视图会自动更新
state.hobbies.push('跑步'); // 视图会自动更新

在这个例子中，state 对象的所有属性（包括嵌套的 address 和 hobbies）都被转换为响应式。修改任何属性，都会触发依赖于 state 的组件重新渲染。

原理剖析

reactive 的底层实现基于 JavaScript 的 Proxy。当使用 reactive 包装一个对象时，Vue 会创建一个 Proxy 对象来拦截对原始对象的访问和修改。

• get 拦截器： 当访问对象的属性时，get 拦截器会被触发。Vue 会在该拦截器中建立依赖关系，记录当前组件依赖于该属性。
• set 拦截器： 当修改对象的属性时，set 拦截器会被触发。Vue 会在该拦截器中通知所有依赖于该属性的组件进行更新。

代码示例 (简化的模拟 reactive 实现):

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      // 依赖收集逻辑 (简化)
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const oldValue = target[key];
      const result = Reflect.set(target, key, value, receiver);
      if (result && oldValue !== value) {
        // 触发更新逻辑 (简化)
        trigger(target, key);
      }
      return result;
    }
  });
}

// 简化的依赖收集函数 (实际 Vue 的实现更加复杂)
let activeEffect = null;
const targetMap = new WeakMap();

function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      targetMap.set(target, depsMap);
    }
    let deps = depsMap.get(key);
    if (!deps) {
      deps = new Set();
      depsMap.set(key, deps);
    }
    deps.add(activeEffect);
  }
}

// 简化的触发更新函数 (实际 Vue 的实现更加复杂)
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }
  const deps = depsMap.get(key);
  if (deps) {
    deps.forEach(effect => {
      effect(); // 执行依赖的更新函数
    });
  }
}

// 模拟一个 effect 函数 (实际 Vue 中的组件更新函数)
function effect(fn) {
  activeEffect = fn;
  fn(); // 首次执行，建立依赖关系
  activeEffect = null;
}

// 示例用法
const data = { name: 'Alice' };
const reactiveData = reactive(data);

effect(() => {
  console.log(`Name is: ${reactiveData.name}`);
});

reactiveData.name = 'Bob'; // 触发更新，console 输出 "Name is: Bob"

这个简化的例子展示了 reactive 的核心思想：使用 Proxy 拦截属性访问和修改，并建立和触发依赖关系。 track函数模拟了依赖收集的过程，trigger函数模拟了触发更新的过程。 实际 Vue 的实现会更加复杂，涉及到更精细的依赖管理和更新调度。

限制

• 只能用于对象类型： reactive 只能用于对象类型 (包括普通对象、数组、Set、Map 等)。如果尝试用 reactive 包装原始类型 (如数字、字符串、布尔值)，会报错。

• 替换整个对象会丢失响应性： 如果直接用一个新的对象替换 reactive 包装的对象，会导致响应性丢失。

  const state = reactive({ name: '张三' });
  state = { name: '李四' }; // 响应性丢失！

  要保持响应性，应该修改对象的属性，而不是替换整个对象。

  const state = reactive({ name: '张三' });
  Object.assign(state, { name: '李四' }); // 保持响应性

  或者使用reactive结合ref来解决。

ref：原始类型和对象的响应式引用

ref 用于创建对原始类型 (如数字、字符串、布尔值) 和对象的响应式引用。它会创建一个包含 .value 属性的对象，用于访问和修改原始值。

使用示例

import { ref } from 'vue';

const count = ref(0); // 创建一个响应式的数字
const message = ref('Hello'); // 创建一个响应式的字符串
const user = ref({ name: '王五', age: 25 }); // 创建一个响应式的对象

console.log(count.value); // 输出: 0

count.value++; // 视图会自动更新
message.value = 'World'; // 视图会自动更新
user.value.name = '赵六'; // 视图会自动更新

// 替换 ref 的值
user.value = { name: '田七', age: 32 }; // 视图会自动更新

在这个例子中，count、message 和 user 都是 ref 对象。要访问或修改它们的值，需要通过 .value 属性。

原理剖析

ref 的底层实现也使用了 Proxy，但与 reactive 不同的是，ref 包装的是一个包含 value 属性的对象。Proxy 拦截的是对 .value 属性的访问和修改。

代码示例 (简化的模拟 ref 实现):

function ref(value) {
  const refObject = {
    value: value
  };

  return new Proxy(refObject, {
    get(target, key, receiver) {
      if (key === '__v_isRef') {
        return true; // 用于判断是否是 ref 对象
      }
      track(target, key); // 依赖收集
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      if (value === target.value) {
        return true; // 值没有变化，不触发更新
      }
      const oldValue = target.value;
      const result = Reflect.set(target, key, value, receiver);
      if (result && oldValue !== value) {
        trigger(target, key); // 触发更新
      }
      return result;
    }
  });
}

// 添加一个辅助函数 isRef 用于判断是否是 ref 对象
function isRef(value) {
  return value && value.__v_isRef === true;
}

// 示例用法 (依赖收集和触发更新的函数与 reactive 示例相同)
const myRef = ref(10);

effect(() => {
  console.log(`Value is: ${myRef.value}`);
});

myRef.value = 20; // 触发更新，console 输出 "Value is: 20"

console.log(isRef(myRef)); // 输出 true
console.log(isRef({value: 10})); // 输出 false

这个简化的例子展示了 ref 的核心思想：创建一个包含 value 属性的对象，并使用 Proxy 拦截对 value 属性的访问和修改，从而实现响应式。

自动解包

在 Vue 模板中，ref 会被自动解包。这意味着，在模板中可以直接访问 ref 的值，而不需要显式地使用 .value。

<template>
  <p>Count: {{ count }}</p>  <!-- 直接访问 count，而不是 count.value -->
  <input type="text" v-model="message"> <!-- 直接绑定 message，而不是 message.value -->
  <p>User Name: {{ user.name }}</p> <!-- 直接访问 user.name，而不是 user.value.name -->
</template>

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

const count = ref(0);
const message = ref('Hello');
const user = ref({ name: '王五', age: 25 });
</script>

在 <script setup> 中，ref 会被自动解包。 在其他情况下，需要显式地使用 .value 访问 ref 的值。

使用场景

• 原始类型： 当需要响应式地跟踪原始类型的值时，应该使用 ref。

• 需要替换整个对象： 当需要替换整个对象时，应该使用 ref。

  const user = ref({ name: '王五', age: 25 });
  user.value = { name: '赵六', age: 30 }; // 可以替换整个对象

reactive vs ref：如何选择？

reactive 和 ref 都是用于创建响应式数据的工具，但它们的使用场景有所不同。

特性	reactive	ref
适用类型	对象 (包括普通对象、数组、Set、Map 等)	原始类型和对象
响应式深度	深度响应式	浅层响应式 (只有 .value 属性是响应式的)
访问方式	直接访问属性	通过 .value 属性访问
模板中的解包	不解包	自动解包 (在 <script setup> 中也会自动解包)
使用场景	需要深度响应式的对象，且不需要替换整个对象	原始类型，或需要替换整个对象

选择原则：

1. 如果需要响应式地跟踪一个对象的所有属性 (包括嵌套的属性)，并且不需要替换整个对象，则使用 reactive。
2. 如果需要响应式地跟踪一个原始类型的值，或者需要替换整个对象，则使用 ref。
3. 如果使用 Composition API，推荐使用 ref，因为它可以提供更清晰的类型推断。

结合使用 reactive 和 ref

reactive 和 ref 可以结合使用，以满足更复杂的需求。例如，可以使用 ref 来包装一个 reactive 对象，以便可以替换整个对象。

import { ref, reactive } from 'vue';

const state = ref(reactive({
  name: '张三',
  age: 30
}));

// 替换整个 reactive 对象
state.value = reactive({
  name: '李四',
  age: 35
});

在这个例子中，state 是一个 ref 对象，它的 value 属性是一个 reactive 对象。这样，既可以实现深度响应式，又可以替换整个对象。

总结使用方法和注意事项

• reactive 用于创建深度响应式对象，适用于对象属性频繁修改的场景。
• ref 用于创建原始类型和对象的响应式引用，适用于需要替换整个对象的场景。
• 在 Vue 模板中，ref 会被自动解包，可以直接访问其值。
• reactive 和 ref 可以结合使用，以满足更复杂的需求。
• 注意 reactive 只能用于对象类型，替换整个 reactive 对象会导致响应性丢失。

更进一步的思考

理解 reactive 和 ref 的工作原理，可以帮助我们更好地利用 Vue 的响应式系统，编写更高效、可维护的代码。同时，也为我们深入理解 Vue 的内部机制奠定了基础。在实际开发中，我们需要根据具体的场景选择合适的响应式方案，并注意避免一些常见的陷阱，才能充分发挥 Vue 的优势。掌握这些知识点对成为一名优秀的 Vue 开发者至关重要。