Vue3 Script Setup中watch监听props属性不生效问题求解

向组件传递了用于声明组件当前状态的prop属性，原本希望通过监听该prop的取值变化动态设置对应CSS样式，但实际功能未正常生效，问题代码如下：

<script setup>
  import { onMounted, reactive, ref, watch, watchEffect } from 'vue'

  const props = defineProps({
    title: String,
    date: String,
    state: String,
  })

  let cardStatus = ref('')

  watch(props.state, () => {
    if (props.state === 'finished'){
      cardStatus.value = 'border border-success'
    }
  })
</script>

<template>
  <div :class="'bg-main-light rounded-2xl w-full p-3 lg:px-5 ' + cardStatus"></div>
</template>

• 监听默认不触发初始执行：Vue的watch默认是懒执行模式，仅当监听的数据源发生变更时才会运行回调。如果组件首次加载时props.state的初始值就是finished，判断逻辑不会执行，cardStatus会一直是空字符串，样式无法生效。
• 状态分支处理不全：代码只处理了state === 'finished'的场景，当state从finished切换为其他状态时，没有重置cardStatus的对应逻辑，会导致成功状态的边框样式一直残留。
• 监听写法存在响应式隐患：直接将props.state作为watch的监听源，后续如果对props做解构等操作很容易丢失响应性，监听prop的标准写法应该传入getter函数() => props.state。
• 实现逻辑冗余：cardStatus的值完全由props.state派生，不需要单独维护ref+watch的组合，这类派生值用计算属性实现更简洁，也不会出现状态同步问题。

推荐直接使用计算属性派生样式类，移除多余的响应式变量和监听逻辑：

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

  const props = defineProps({
    title: String,
    date: String,
    state: String,
  })

  const cardStatus = computed(() => {
    return props.state === 'finished' ? 'border border-success' : ''
  })
</script>

<template>
  <div :class="'bg-main-light rounded-2xl w-full p-3 lg:px-5 ' + cardStatus"></div>
</template>

如果一定要使用watch实现，需要补全两个配置：一是添加immediate: true让监听在组件初始化时就执行一次，二是补全所有状态分支的处理逻辑，参考写法：

watch(() => props.state, (newVal) => {
  cardStatus.value = newVal === 'finished' ? 'border border-success' : ''
}, { immediate: true })

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