Vue3 : ref 与 reactive
目录
一.ref
二.reactive
三.ref与reactive的区别
四.总结
一.ref
在 Vue 3 中，ref 是一个用于创建可读写且支持数据跟踪的响应式引用对象。它主要用于在组件内部创建响应式数据，这些数据可以是基本类型（如 number、string、boolean）或者是对象。ref 的主要作用是提供一种方式来创建和操作响应式数据，使得 Vue 能够在数据变化时自动更新视图。
二.reactive
在 Vue 3 中，reactive 是一个用于创建响应式对象的函数。它接受一个对象作为参数，并返回该对象的响应式副本。在 Vue 3 的数据驱动渲染和响应式系统中，reactive 的使用至关重要，因为它允许 Vue 能够追踪和更新依赖于该对象的组件状态。
三.ref与reactive的区别
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 基本类型数据、对象类型数据 | 支持基本类型 |
| 返回值 | 返回一个包含 .value 属性的对象 | 返回一个响应式对象 |
| 使用场景 | 当你需要响应式的基本数据类型时 | 当你需要响应式对象时，特别是对象包含多个属性时 |
四.总结
1.当你需要响应式的基本数据类型时，使用 ref。
2.当你需要处理一个包含多个属性的对象，并且希望这些属性都是响应式的，使用 reactive。
3.ref 和 reactive 都能够触发视图的自动更新，但它们在内部实现和适用场景上有所不同。