前端 - vue3 reactive() 的局限性：对解构操作不友好，ref似乎也有这个问题？

Question

https://cn.vuejs.org/guide/essentials/reactivity-fundamentals...

https://play.vuejs.org/#eNp9UcFuwjAM/ZUoF4qoShE3VJC2iQM7bNO2Y...

如代码所示，解构丢失响应性连接似乎并不只是reactive的“局限性”

Answer 1

reactive() 的话可用利用 toRefs() 方法转换为 ref 变量构成的对象从而使用结构赋值，参见 https://vuejs.org/api/reactivity-utilities.html#torefs 以及官方的示例

const state = reactive({  foo: 1,  bar: 2})const { foo, bar } = toRefs(state)// The ref and the original property is "linked"state.foo++console.log(foo.value) // 2foo.value++console.log(state.foo) // 3

Answer 2

对，你提到的这个问题不仅限于reactive()，包括ref()在内的一些Vue3的反应性API在处理解构时都有一定的问题。

Vue3 的反应性系统在处理解构操作时，无法跟踪解构的子属性变化。例如，如果你有一个对象，并且使用reactive()对其进行了反应性处理，然后通过解构来访问其属性，那么当这些属性发生改变时，Vue3的反应性系统无法跟踪这些变化。

以下是一个例子：

import { reactive } from 'vue'const state = reactive({  obj: {    value: 1,  },})const otherState = { ...state.obj } // 解构操作

在这个例子中，otherState 是从 state.obj 中解构出来的，然而它并不会保持与 state.obj 的反应性连接。如果 state.obj.value 改变，otherState.value 不会更新。

这个问题的根源在于 Vue3 的反应性系统只能跟踪通过反应性对象直接导出的属性，而无法跟踪通过解构得到的属性。对于这种情况，你需要手动使用 ref() 来创建反应性引用。例如：

import { reactive, ref } from 'vue'const state = reactive({  obj: {    value: ref(1), // 使用ref来创建反应性引用  },})const otherState = { ...state.obj } // 解构操作

在这个例子中，即使 state.obj.value 改变，otherState.value 也会更新，因为 state.obj.value 是一个反应性引用。