Vue3 参考没有刷新？

Question

我需要一些帮助来理解裁判的工作方式。我很确定我犯了一些明显的基本错误，但我就是不明白。有人可以解释一下吗？

在

script setup

中，我得到了一些从外部组件传递来的道具：

const props = defineProps({
    myEvent: Object,
    gridColumnLabels: Object,
    gridColumnOrder: Array,
    isAdmin: Boolean,
    isLoggedIn: Boolean,
    userEmail: String
})

然后我声明了一个裁判：

const isMR = ref(props.myEvent.mREmail ? props.myEvent.mREmail?.includes(userEmail) : false)

myEvent.mREmail

可能存在也可能不存在。我希望如果

myEvent.mREmail

存在，并且它包含

userEmail

，那么

isMR

就是

true

。

现在在我的模板中显示：

<div>
    userEmail: {{ userEmail }}
</div>
<div>
    props.myEvent.mREmail: {{ props.myEvent.mREmail}}
</div>
<div>
    props.myEvent?.mREmail?.includes(userEmail): {{ props.myEvent?.mREmail?.includes(userEmail) }}
</div>
<div>
    isMR: {{ isMR }}
</div>

这是我渲染的结果：

userEmail: [email protected]
props.myEvent.mREmail: [email protected]
props.myEvent?.mREmail?.includes(userEmail): true
isMR: false

为什么，哦为什么？....

Answer 1

通过以下方式使用游乐场

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const localEmail = ref('[email protected]')
</script>

<template>
    <p>parent component</p>
    <input v-model="localEmail" />
    <br />

    <Child :email="localEmail" />
</template>

Child.vue

<script setup>
import { computed } from 'vue'

const props = defineProps({
    email: String
})

const isMatching = computed(() => props.email == '[email protected]')
</script>

<template>
    ---
    <p>child component</p>
    <p>props from parent: {{ props.email }}</p>
    <p>does it match? {{ isMatching }}</p>
</template>

如果匹配正确的电子邮件，我们就有正确的布尔值

还有

false

否则

A

prop

已经是反应式的，不需要再次包装到

ref

中。

Vue 在下面使用了

proxy

，如果你将它包裹两次，它就会破坏整个原则。请阅读该文章以获取有关反应性系统的更多说明：https://vuejs.org/api/options-state.html#props

如果您想重新评估特定值，请使用

computed

来实现此目的，它将跟踪依赖项并对它们做出相应的反应。
更多信息在这里：https://vuejs.org/guide/essentials/compulated.html