从另一个反应性 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
我知道这个标题可能有点难理解(我不知道如何简单地说),所以这里有一个最小的例子。想象一下,我有一个反应性 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