reactive使用中出现的一些问题

reactive 使用不当会失去响应

使用 reactive 时，如果不当使用，可能导致响应性失效，带来一些困扰。这可能让开发者在愉快编码的同时，突然发现某些操作失去了响应性，不明所以。因此，建议在不了解 reactive 失去响应的情况下慎用，而更推荐使用 ref。

1. 赋值给 reactive 一个整个对象或 reactive 对象

赋值一个普通对象

let state = reactive({ count: 0 })
// 这个赋值将导致 state 失去响应
state = { count: 1 }

赋值一个 reactive 对象

<template>
  {{ state }}
</template>    

<script setup>
const state = reactive({ count: 0 })
// 在 nextTick 异步方法中修改 state 的值
nextTick(() => {
  // 并不会触发修改 DOM ，说明失去响应了
  state = reactive({ count: 11 });
});
</script>

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

解决方法：

1. 不要直接整个对象替换，一个个属性赋值

let state = reactive({ count: 0 })
// state = { count: 1 }
state.count = 1

1. 使用 Object.assign

let state = reactive({ count: 0 })
// state = { count: 1 }，state 不会失去响应
state = Object.assign(state, { count: 1 })

1. 使用 ref 定义对象

let state = ref({ count: 0 })
state.value = { count: 1 }

2. 将 reactive 对象的属性赋值给变量（断开连接/深拷贝）

这种操作类似于深拷贝，不再共享同一内存地址，而是只是字面量的赋值，对该变量的赋值不会影响原来对象的属性值。

let state = reactive({ count: 0 })
// 赋值给 n，n 和 state.count 不再共享响应性连接
let n = state.count
// 不影响原始的 state
n++
console.log(state.count) // 0

解决方案：

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

3. 直接 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