Vue 3源码深度解析之：`Vue`的`reactive`对象与`Object.freeze()`：它们的兼容性与行为差异。

各位观众老爷，晚上好！今天咱聊聊Vue 3的"冻人"秘密：reactive对象与Object.freeze()的那些事儿！

大家好哇！我是你们的老朋友，今天要跟大家深入剖析一下Vue 3中一个挺有意思的话题：reactive对象和Object.freeze()。这两个东西看起来都能阻止对象被修改，但实际上，它们背后的机制和使用场景可是大相径庭。如果对它们理解不深，很容易踩坑哦！

今天我们就来扒一扒它们的底裤，看看它们到底有啥区别，在Vue 3里应该怎么正确地使用它们。

一、reactive：Vue 3 的数据魔法师

首先，咱们来认识一下reactive。这是Vue 3的核心API之一，用于创建响应式对象。啥叫响应式对象？简单来说，就是当你的数据发生变化时，Vue会自动更新视图。就像你养了个小宠物，它的一举一动都会牵动你的心，而Vue就是你的心。

例子：

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0
});

effect(() => {
  console.log("Count changed:", state.count);
});

state.count++; // 输出: Count changed: 1
state.count = 10; // 输出: Count changed: 10

在这个例子中，我们用reactive创建了一个state对象，它有一个属性count。然后，我们用effect创建了一个副作用函数，这个函数会在state.count发生变化时自动执行。

reactive的原理：

reactive的背后，是Proxy这个强大的武器。它拦截了对对象属性的访问、设置和删除等操作，从而实现了数据的响应式。当属性被访问时，Vue会将当前活动的副作用函数（比如effect里的函数）添加到该属性的依赖列表中。当属性被修改时，Vue会通知所有依赖该属性的副作用函数重新执行。

reactive的限制：

• 只能处理对象： reactive只能用于对象（包括普通对象、数组、Map、Set等），不能用于原始类型（比如数字、字符串、布尔值）。如果你想让原始类型具有响应式，可以使用ref。
• 需要深度响应式： reactive默认会递归地将对象的所有属性都变成响应式的。这意味着，如果你的对象包含嵌套的对象，那么嵌套的对象也会被reactive处理。
• 性能开销： 虽然Proxy很强大，但也会带来一定的性能开销。在处理大型对象时，需要注意性能问题。

二、Object.freeze()：冰封王座的守护者

Object.freeze()是JavaScript内置的方法，用于冻结一个对象。被冻结的对象不能再添加新的属性，也不能删除已有的属性，也不能修改已有属性的值。简单来说，就是把对象变成了一个只读的常量。

例子：

const obj = {
  name: 'Alice',
  age: 30
};

Object.freeze(obj);

obj.name = 'Bob'; // 严格模式下会报错，非严格模式下修改无效
obj.address = 'Wonderland'; // 严格模式下会报错，非严格模式下添加属性无效
delete obj.age; // 严格模式下会报错，非严格模式下删除属性无效

console.log(obj); // 输出: { name: 'Alice', age: 30 }

在这个例子中，我们用Object.freeze()冻结了obj对象。之后，我们尝试修改、添加和删除obj的属性，都失败了。

Object.freeze()的原理：

Object.freeze()实际上是修改了对象的内部属性描述符。它将对象的writable、configurable属性都设置为false。这意味着，该属性不能被修改、删除，也不能被重新配置。

Object.freeze()的限制：

• 浅冻结： Object.freeze()只能冻结对象的第一层属性。如果对象包含嵌套的对象，那么嵌套的对象仍然是可以被修改的。
• 不可逆： 一旦对象被冻结，就无法解冻。
• 不适用于响应式系统： Object.freeze()与Vue的响应式系统不兼容。被冻结的对象无法被reactive处理，也无法触发视图更新。

三、reactive vs Object.freeze()：一场冰与火之歌

现在，我们已经了解了reactive和Object.freeze()的基本用法和原理。接下来，我们来对比一下它们的区别：

特性	reactive	Object.freeze()
功能	创建响应式对象，数据变化自动更新视图	冻结对象，阻止对象被修改
适用对象	对象（包括普通对象、数组、Map、Set等）	对象
响应式	支持	不支持
深度	深度响应式（递归处理嵌套对象）	浅冻结（只冻结第一层属性）
可逆性	可逆（可以移除响应式）	不可逆
性能	有一定的性能开销（Proxy）	性能开销较小
兼容性	与Vue的响应式系统兼容	与Vue的响应式系统不兼容
使用场景	需要响应式数据的场景（比如组件的状态管理）	不需要响应式数据，只需要保证数据不被修改的场景（比如配置项）
修改检测	通过Proxy拦截修改，触发依赖更新	无法检测修改，修改无效（严格模式下报错）

总结：

• reactive是为了实现数据的响应式，让数据变化自动更新视图。
• Object.freeze()是为了保护数据不被意外修改，提高程序的健壮性。

四、在Vue 3中如何正确使用它们？

了解了reactive和Object.freeze()的区别之后，我们就可以在Vue 3中正确地使用它们了。

1. 需要响应式数据时，使用reactive：

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    const increment = () => {
      state.count++;
    };

    return {
      state,
      increment
    };
  }
};
</script>

在这个例子中，我们需要让count属性具有响应式，所以我们使用了reactive。当count的值发生变化时，视图会自动更新。

2. 不需要响应式数据，只需要保证数据不被修改时，使用Object.freeze()：

const config = {
  apiUrl: 'https://example.com/api',
  timeout: 5000
};

Object.freeze(config);

// 尝试修改配置项，会报错或者无效
// config.apiUrl = 'https://new-example.com/api';

在这个例子中，我们希望保护config对象不被意外修改，所以我们使用了Object.freeze()。这样做可以提高程序的健壮性。

3. 混合使用：

有时候，我们需要对对象的部分属性进行响应式处理，而对另一些属性进行冻结。这时，我们可以混合使用reactive和Object.freeze()。

import { reactive } from 'vue';

const data = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Wonderland',
    country: 'Fantasy'
  }
};

// 对name和age进行响应式处理
const state = reactive({
  name: data.name,
  age: data.age
});

// 对address进行冻结
const address = Object.freeze(data.address);

console.log(state.name); // 响应式的
console.log(address.city); // 非响应式的

在这个例子中，我们只对name和age属性进行了响应式处理，而对address对象进行了冻结。这样做可以兼顾响应式和数据保护。

4. 注意深度冻结：

Object.freeze()只能进行浅冻结。如果你的对象包含嵌套的对象，那么你需要递归地对嵌套的对象进行冻结。

function deepFreeze(obj) {
  // 确保传入的是一个对象
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  // 获取对象的所有属性名
  const propNames = Object.getOwnPropertyNames(obj);

  // 冻结属性之前先冻结嵌套对象

  for (const name of propNames) {
    const value = obj[name];

    if (typeof value === 'object' && value !== null) {
      deepFreeze(value);
    }
  }

  return Object.freeze(obj);
}

const data = {
  name: 'Alice',
  age: 30,
  address: {
    city: 'Wonderland',
    country: 'Fantasy'
  }
};

deepFreeze(data);

// 尝试修改嵌套对象的属性，会报错或者无效
// data.address.city = 'New Wonderland';

在这个例子中，我们定义了一个deepFreeze函数，用于递归地冻结对象的所有属性。这样可以确保对象的所有属性都不能被修改。

五、总结与彩蛋

今天我们深入探讨了Vue 3中的reactive对象和Object.freeze()。它们虽然都能阻止对象被修改，但背后的机制和使用场景却截然不同。reactive是为了实现数据的响应式，而Object.freeze()是为了保护数据不被意外修改。

希望通过今天的讲解，大家能够对reactive和Object.freeze()有更深入的理解，并在Vue 3项目中正确地使用它们。

彩蛋：

其实，除了reactive和Object.freeze()之外，Vue 3还提供了readonly API。readonly可以将一个对象变成只读的，但它仍然是响应式的。这意味着，你可以访问readonly对象的属性，但不能修改它们。

import { reactive, readonly } from 'vue';

const state = reactive({
  count: 0
});

const readOnlyState = readonly(state);

console.log(readOnlyState.count); // 可以访问

// readOnlyState.count++; // 尝试修改会报错

readonly在某些场景下，可以用来保护你的状态，防止被意外修改。

好了，今天的分享就到这里。希望大家有所收获！咱们下期再见！