reactive、readonly 和 ref 的区别和使用场景

reactive

reactive API 是 Vue.js 中最常用的响应式 API，它可以将一个普通 JavaScript 对象转换为响应式对象。当响应式对象中的数据发生变化时，Vue.js 会自动检测到这些变化并更新视图。

reactive 创建流程

1. 首先，reactive API 会创建一个新的 Proxy 对象。
2. 然后，它会遍历这个对象的每个属性，并将其转换为 getter 和 setter。
3. 当访问响应式对象的属性时，getter 会被触发，返回属性的当前值。
4. 当修改响应式对象的属性时，setter 会被触发，更新属性的值并通知 Vue.js 进行视图更新。

已经是一个 readonly proxy

reactive 创建流程 中提到的 Proxy 对象是一个 readonly proxy，这意味着它只能被读取，不能被修改。因此，如果要修改响应式对象中的数据，需要使用 Vue.set() 方法。

直接返回这个 proxy

reactive API 直接返回这个 proxy，因此，必须是对象或数组类型。否则，它将返回 target。

readonly

readonly API 与 reactive API 类似，它也可以将一个普通 JavaScript 对象转换为响应式对象。但是，readonly API 创建的响应式对象是只读的，这意味着不能修改其中的数据。

readonly 创建流程

1. 首先，readonly API 会创建一个新的 Proxy 对象。
2. 然后，它会遍历这个对象的每个属性，并将其转换为 getter。
3. 当访问只读响应式对象的属性时，getter 会被触发，返回属性的当前值。
4. 但是，如果试图修改只读响应式对象的属性，则会抛出一个错误。

必须是对象或数组类型

readonly API 也必须是对象或数组类型，否则，它将返回 target。

返回一个只读的 proxy

readonly API 返回一个只读的 proxy，这意味着不能修改其中的数据。

ref

ref API 与 reactive API 和 readonly API 不同，它不是用来将一个普通 JavaScript 对象转换为响应式对象。相反，它用来创建一个响应式引用，该引用指向一个值。当引用的值发生变化时，Vue.js 会自动检测到这些变化并更新视图。

ref 创建流程

1. 首先，ref API 会创建一个新的响应式引用对象。
2. 然后，它会将引用的值存储在这个对象中。
3. 当访问响应式引用对象的 .value 属性时，会返回引用的当前值。
4. 当修改响应式引用对象的 .value 属性时，会更新引用的值并通知 Vue.js 进行视图更新。

ref 的用法

ref API 可以用来引用各种类型的值，包括基本类型、对象、数组甚至组件实例。

ref 的优点

ref API 的优点是它可以轻松地访问和修改引用的值，而无需使用 Vue.set() 方法。

区别和使用场景

reactive、readonly 和 ref 是 Vue.js 中三个重要的响应式 API，它们都有各自的用法和特点。

• reactive API 用于将一个普通 JavaScript 对象转换为响应式对象。响应式对象中的数据可以被修改，但需要使用 Vue.set() 方法。
• readonly API 用于将一个普通 JavaScript 对象转换为只读响应式对象。只读响应式对象中的数据不能被修改。
• ref API 用于创建一个响应式引用，该引用指向一个值。引用的值可以被修改，而无需使用 Vue.set() 方法。

在实际开发中，可以根据需要选择使用不同的响应式 API。例如，如果需要一个响应式对象，并且需要频繁修改其中的数据，则可以使用 reactive API。如果需要一个只读响应式对象，则可以使用 readonly API。如果需要创建一个响应式引用，则可以使用 ref API。