Vue3 中 reactive 的局限

reactive() API 有一些局限性：

有限的值类型:
不能替换整个对象:

let state = reactive({ count: 0 })

// 上面的 ({ count: 0 }) 引用将不再被追踪
// (响应性连接已丢失！)
state = reactive({ count: 1 })

改为 ref 定义

const form= ref({})
form.value = {...data}

如果是数组的话，可以使用push新增数据

const arr = reactive([])
arr.push(...[1, 2, 3])

再封装一层数据（推荐！）即定义属性名，在后期赋值的时候，对属性名进行赋值

const state = reactive({
  arr: [],
  form:{}
});

state.arr = [1, 2, 3]
state.form = {...data}

对解构操作不友好:

const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

// 该函数接收到的是一个普通的数字
// 并且无法追踪 state.count 的变化
// 我们必须传入整个对象以保持响应性
callSomeFunction(state.count)

toRefs 解决：

const state = reactive({      
  arr: [],
  form:{}
}); 
state.arr = [1, 2, 3]
state.form ={...data}
return{ ...toRefs(state), }

//如果是在 script setup 里面 不需要return 结构出来即可

const { form,arr} = toRefs(state)

参考：

Vue3 中 reactive 的局限 ​

Vue3 中 reactive 的局限