从另一个反应性 object 获取字符串时如何保持 Vue 反应性

How to keep vue reactivity when getting a string from another reactive object

我知道这个标题可能有点难理解(我不知道如何简单地说),所以这里有一个最小的例子。想象一下,我有一个反应性 object ObjectA,如果它 属性:

我尝试复制一个
const objectA = reactive({
    name: "test"
})

const objectB_01 = reactive({
    name: a.name
}) // lose reactivity

const objectB_02 = reactive({
    name: ref(a.name)
}) // lose reactivity

const objectB_03 = reactive({
    get name() { return a.name }
}) // keep reactivity

当我有一个看起来像这样的模板时:

<template>
    <div>{{ objectA.name }}</div>
</template>

然后,名称是反应性的(意思是,如果我在某处更改它,模板会立即更新)。

但它不起作用 objectB_01.name,也不 objectB_02.name。它只适用于 objectB_03.name,但如果发现它是一个有点老套的解决方案。

我的问题是:有正确的方法吗?我的意思是,使用 get 运算符确实有效,但我发现它真的不是那么干净...

例如反应式api

reactive 将展开所有深度 refs,同时保持 ref 反应性

const count = ref(1)
const obj = reactive({ count })

// ref will be unwrapped
console.log(obj.count === count.value) // true

// it will update `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// it will also update `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

你应该多看看这个; https://v3.vuejs.org/api/basic-reactivity.html#reactive

如果您希望值在 objectA 和 objectB 中都是反应性的,您需要一个值的单一来源,因此 getter 和 setter 是唯一的方法。

const objectB_03 = reactive({
    get name() { return a.name },
    set name(value) { a.name = value }
}) // keep reactivity

事实上,Vue2 数据就是这样做的,ref How Changes Are Tracked

When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters