Vue3 setup根作用域直接获取props丢失响应性如何解决？

Vue3 中 props 是顶层响应式代理对象，你在子组件中直接将 props.courseId 赋值给普通变量 trainingCourseId 时，相当于读取了属性的当前瞬时值赋值给非响应式的普通变量，后续 props.courseId 更新时这个普通变量不会同步更新，就会触发你遇到的报错。

方案1：使用 toRef/toRefs 包装（最适配当前场景） #

toRef 会创建一个和原 prop 属性关联的响应式 Ref 对象，后续 prop 更新时该 Ref 的值会同步更新，适合处理单个 prop 属性：

import { defineComponent, toRef } from 'vue'
export default defineComponent({
  components: { CourseTopic },
  props: {
      courseId: {
        type: String
      }
    },
  setup(props) {
    // 用 toRef 包装建立响应式关联，后续取值需要加 .value
    const trainingCourseId = toRef(props, 'courseId')

    return { courses, trainingCourseId };
  },
});

如果需要批量处理多个 prop 属性，可以用 toRefs：

import { defineComponent, toRefs } from 'vue'
setup(props) {
  // 批量将所有 prop 转为 Ref 对象再解构，不会丢失响应性
  const { courseId } = toRefs(props)
  const trainingCourseId = courseId

  return { courses, trainingCourseId };
}

方案2：使用 watch 监听 prop 变化 #

如果你的需求是在 courseId 变化时执行特定逻辑（比如拉取对应课程数据），可以直接监听 props 的对应属性：

import { defineComponent, watch } from 'vue'
export default defineComponent({
  components: { CourseTopic },
  props: {
      courseId: {
        type: String
      }
    },
  setup(props) {
    watch(() => props.courseId, (newId) => {
      // 此处写 id 变化后的处理逻辑
      console.log('课程ID更新为', newId)
    }, { immediate: true }) // immediate 设为 true 会在组件初始化时先执行一次回调
  },
});

额外优化点 #

父组件中直接将 route.params.id 赋值给普通变量 id 也会丢失响应性，如果你的路由参数会动态变化（比如同页面切换不同课程ID），也需要用 toRef 包装：

// 父组件 setup 修改
import { toRef } from 'vue'
import {useRoute} from 'vue-router';
setup(){
    const route = useRoute()
    const id = toRef(route.params, 'id')
    console.log("the course id is", id.value);
  return{
    id
  }
}

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