javascript - 从另一个 react 对象获取字符串时如何保持 vue react 性

Question

我知道这个标题可能有点难理解(我不知道如何简单地说)，所以这里有一个最小的例子。假设我有一个 react 对象 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>

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

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

我的问题是:是否有正确的方法来做到这一点？我的意思是，使用 get 运算符确实有效，但我发现它真的不是那么干净...

Answer 1

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

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

事实上，Vue2 数据就是这样做的，引用 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