Vue3条件赋值computed/普通变量，能否自动识别响应式并更新？

问题代码与疑问 #

初始编写的Vue3代码如下：

const { label } = defineProps<{label?: string}>()

const labelTransformed = label ? computed(() => {
  // 对label进行转换处理
}) : 'default label'

模板使用：

<template>
  <div>{{ labelTransformed }}</div>
</template>

想请教：当labelTransformed是响应式computed值或普通JavaScript变量时，Vue能否自动识别并在需要时更新它？

实际场景补充 #

我的实际场景更复杂，涉及多个依赖，部分场景下值应为null，因此更倾向于以下写法：

const labelTransformed = label ? computed(() => {
  // 使用多个依赖并转换label
}) : null

而非将判断放在computed回调内：

const labelTransformed = computed(() => {
  return label ? /* 转换label */ : null
})

解答 #

首先明确：你的第一种写法无法实现自动更新，原因如下：

• labelTransformed的赋值逻辑是在组件初始化阶段执行的，只会运行一次。后续即使label（或其他依赖）发生变化，这个三元判断不会重新执行，labelTransformed的引用不会被更新。
  比如初始label为undefined，labelTransformed被赋值为'default label'；之后父组件传入label值，labelTransformed依然是'default label'，不会切换为computed实例。反过来初始有label值，之后改为undefined，labelTransformed还是之前的computed对象，不会变成null。

而将判断逻辑放在computed回调内部的写法，是完全可以实现自动更新的：

• computed会自动追踪回调函数内用到的所有响应式依赖（包括label以及其他你用到的响应式变量），只要任意依赖发生变化，回调就会重新执行，返回最新的结果，模板也会自动更新显示。

针对你提到的复杂场景（多依赖、可能返回null），更应该选择把判断和转换逻辑都放在computed内部：

• 这种写法能确保所有依赖变化都能触发labelTransformed的重新计算，始终保持响应式；而外部赋值的写法只会在初始化时确定labelTransformed的类型，后续依赖变化无法触发更新，会导致页面显示和实际状态不一致。

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