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

Question

我知道这个标题可能有点难理解（我不知道如何简单地说），所以这里有一个最小的例子。想象一下，我有一个反应性 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 运算符确实有效，但我发现它真的不是那么干净...

Answer 1

例如反应式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

Answer 2

如果您希望值在 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

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

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

javascript

vue.js

vue-reactivity