Vue3的ref与reactive

为什么推荐使用ref而不是reactive
reactive在使用过程中存在一些局限性，如果不额外注意这些问题，可能会给开发带来一些不便。与此不同，ref
更像是Vue2时代的option API中的data的替代品，可以存放任何数据类型，而reactive声明的数据类型则仅限于对象。
总体来说，非必要的情况下最好避免使用reactive。官方文档也强烈推荐使用ref()
作为声明响应式状态的主要API。以下是详细原因：

局限性问题： reactive本身存在一些局限性，可能会在开发过程中引发一些问题。这需要额外的注意力和处理，否则可能对开发造成麻烦。
数据类型限制： reactive声明的数据类型仅限于对象，而ref则更加灵活，可以容纳任何数据类型。这使得ref更适合一般的响应式状态的声明。
官方推荐：官方文档强烈建议使用ref()作为声明响应式状态的首选。这是因为ref更简单、更直观，同时避免了reactive可能引发的一些问题。
总的来说：除非有特定的需求需要使用reactive，否则在大多数情况下更推荐使用ref()

reactive和 ref对比
在这里插入图片描述

即：

ref用于将基本类型的数据和引用数据类型（对象）转换为响应式数据，通过 .value
访问和修改。
reactive用于将对象转换为响应式数据，可以直接访问和修改属性，适用于复杂的嵌套对象和数组。
01: reactive有限的值类型
reactive只能声明引用数据类型（对象）
let obj = reactive({
name: ‘小明’,
age: 18
})
ref既能声明基本数据类型，也能声明对象和数组
Vue 提供了 ref()方法，允许我们创建可以使用任何值类型的响应式 ref
。
// 对象
const state = ref({})
// 数组
const state2 = ref([])
使用 ref，你可以灵活地声明基本数据类型、对象或数组，而不受像 reactive那样只能处理引用数据类型的限制。这为开发提供了更大的灵活性，尤其是在处理不同类型的数据时。
02: reactive使用不当会失去响应
使用 reactive时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解 reactive失去响应的情况下慎用，而更推荐使用 ref
。

赋值给 reactive一个整个对象或 reactive对象
赋值一个普通对象
let state = reactive({ count: 0 })
// 这个赋值将导致 state 失去响应
state = { count: 1 }
赋值一个 reactive对象

{{ state }}

在 nextTick中给 state赋值一个 reactive的响应式对象，但是 DOM 并没有更新。
解决方法：

不要直接整个对象替换，一个个属性赋值
let state = reactive({ count: 0 })
// state = { count: 1 }
state.count = 1
使用 Object.assign
let state = reactive({ count: 0 })
// state = { count: 1 }，state 不会失去响应
state = Object.assign(state, { count: 1 })
使用 ref定义对象
let state = ref({ count: 0 })
state.value = { count: 1 }
将 reactive对象的属性赋值给变量（断开连接/深拷贝）
这种操作类似于深拷贝，不再共享同一内存地址，而是只是字面量的赋值，对该变量的赋值不会影响原来对象的属性值。
let state = reactive({ count: 0 })
// 赋值给 n，n 和 state.count 不再共享响应性连接
let n = state.count
// 不影响原始的 state
n++
console.log(state.count) // 0
解决方案：

避免将 reactive对象的属性赋值给变量。

直接 reactive对象解构时
直接解构会失去响应。
let state = reactive({ count: 0 })
// 普通解构，count 和 state.count 失去了响应性连接
let { count } = state
count++ // state.count 值依旧是 0
解决方案：
使用 toRefs解构，解构后的属性是 ref的响应式变量。
const state = reactive({ count: 0 })
// 使用 toRefs 解构，后的属性为 ref 的响应式变量
let { count } = toRefs(state)
count.value++ // state.count 值改变为 1
建议：ref一把梭
推荐使用 ref，总结原因如下：
reactive有限的值类型：只能声明引用数据类型（对象/数组）。
reactive在一些情况下会失去响应，这可能导致数据回显失去响应（数据改了，DOM 没更新）。

{{ state.a }}
{{ state.b }}
{{ state.c }}

上面这个例子如果是使用 ref进行声明，直接赋值即可，不需要将属性拆分一个个赋值。使用 ref
替代 reactive：

{{ state.a }}
{{ state.b }}
{{ state.c }}

给响应式对象的字面量赋一整个普通对象或 reactive对象将导致 reactive声明的响应式数据失去响应。

ref适用范围更广，可声明基本数据类型和引用数据类型。
虽然使用 ref声明的变量在读取和修改时都需要加 .value小尾巴，但正因为有这个小尾巴，我们在 review 代码的时候就很清楚知道这是一个 ref声明的响应式数据。

ref的 .value好麻烦！
ref声明的响应式变量携带迷人的 .value小尾巴，让我们一眼就能确定它是一个响应式变量。虽然使用 ref
声明的变量在读取和修改时都需要加 .value小尾巴，但是正因为有这个小尾巴，我们在 review 代码的时候就很清楚知道这是一个 ref声明的响应式数据。可能有些人不喜欢这个迷人小尾巴，如果我能自动补全，阁下又如何应对？
Volar 插件能自动补全 .value
推荐 ref一把梭，但是 ref又得到处 .value，那就交给插件来完成吧！

Volar自动补全 .value（不是默认开启，需要手动开启）
reactive
重新赋值丢失响应是因为引用地址变了，被 proxy
代理的对象已经不是原来的那个，所以丢失响应了。其实 ref
也是一样的，当把 .value
那一层替换成另外一个有着 .value
的对象也会丢失响应。ref
定义的属性等价于 reactive({ value: xxx })
。
另外，说使用 Object.assign
为什么可以更新模板：
Object.assign
解释是这样的：如果目标对象与源对象具有相同的键（属性名），则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的同名属性。
那个解决方法里不用重新赋值，直接 Object.assign(state, { count: 1 })
即可，所以只要 proxy
代理的引用地址没变，就会一直存在响应性

GPT对reactive的回答：
[图片]