reactive 和 ref 的不同

• ref 是通过一个中间对象 RefImpl 持有数据，并通过重写它的 set 和 get 方法实现数据劫持的，本质上依旧是通过 Object.defineProperty 对 RefImpl 的 value 属性进行劫持。

• reactive 则是通过 Proxy 进行劫持的。 Proxy 无法对基本数据类型进行操作，进而导致 reactive 在面对基本数据类型时的束手无策

• Proxy 无法对基本数据类型进行操作：

Proxy 对象本身只能“劫持”引用类型的数据（例如对象、数组等），而无法“劫持”基本数据类型（例如 string、number、boolean、null、undefined 等）。这意味着，如果你尝试将一个基本数据类型传给 reactive，它不会变成响应式的，因为 Proxy 无法对这些数据类型进行“代理”。

虽然将基本数据类型传递给 reactive 不会使其成为响应式数据（即不会在页面上触发更新），但基本数据类型的值仍然会被改变。

reactive 只能作用于 引用类型，比如对象、数组等。

// proxy 資料範例
Proxy(Object) {id: '2d157d5', name: 'TEST', scCnt: 2, tchCnt: 2, receiveType: 1, …}

PS 說明:

如果对 ref 数组进行迭代，ref 数组本身是响应式的，但是数组中的项（比如对象）默认不是响应式的，
除非你显式使用 reactive 或 ref 对它们进行包装。

---

在 Vue 3 中，reactive 和 ref 都是用来创建响应式数据的

我們先來看看這兩個方法的差異

ref : 可以接受任何型態的資料，但是不會對 ref 物件或陣列內部的屬性變動做監聽，因為需要使用 .value 才能取得實際資料物件去監聽。

reactive : 只能接受 Object 或 Array，會對內部的屬性變動做深層的監聽，取資料時不需要 .value。

2023/4/15補充: reactive 只能接受物件型別的內容，如果塞入非物件型別的值會出現警告跟你說該值是無法進行響應式的，所以陣列跟物件都算是物件型別喔。

---

1. 数据类型

reactive

用于将 对象 转换为响应式对象。 它只能作用于 对象类型（如 Object、Array）。 内部会深度转换对象中的属性为响应式。

ref

用于包装 任意值，包括基本数据类型（string、number、boolean）和对象类型。 如果是对象类型的值，ref 会将其包装为一个单独的对象（不进行深度响应式转换，除非使用 .value 引用的对象）。