Vue3中ref未更新？求解析refs工作机制问题

你遇到的核心问题是：ref的初始化赋值是一次性的，不会自动响应props的变化。

你当前的代码里，isMR在组件初始化时根据当时的props.myEvent和userEmail计算出初始值，但之后这两个props更新时，isMR不会重新计算，所以导致它的值和实时计算结果不符。

正确写法：用computed替代ref #

因为isMR是依赖props的派生值，Vue的计算属性computed会自动追踪依赖的变化，实时更新结果：

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

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

// 用computed自动响应props变化
const isMR = computed(() => {
  // 简化可选链写法，逻辑和原代码一致
  return props.myEvent?.mREmail?.includes(props.userEmail) ?? false
})
</script>

补充说明 #

• 计算属性会自动监听props.myEvent和props.userEmail的变化，只要其中任何一个值改变，就会重新计算isMR的结果。
• 使用?? false可以在props.myEvent?.mREmail?.includes(...)返回undefined时（比如mREmail不存在），默认返回false，和你原逻辑完全匹配。

内容的提问来源于stack exchange，提问作者Maciejg