直接从 vue 3 设置获得的道具不是反应性的

Question

我正在用 vuejs 编写一个应用程序，我想将 prop 传递给子组件，但出现此错误：

从 props 在 setup() 的根范围内获取值将导致该值失去反应性

父组件

<template>
  <div>
      <course-list :courseId = "id"  />
  </div>
</template>

 import {useRoute} from 'vue-router';
import { ref, onMounted, reactive} from 'vue';
export default defineComponent({
  components: { NavBar, CourseList, CourseContent },
  props:{
    courseId: String
  },
  setup(){
      const route = useRoute()

      const id = route.params.id
      console.log("the course id is", id);

    return{
      id
    }
  }
}

子组件

export default defineComponent({
  components: { CourseTopic },
  props: {
      courseId: {
        type: String
      }
    },
  setup(props) {

    const trainingCourseId = props.courseId;

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

我该如何解决这个问题？

原文由 etranz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 toRefs() props 以保持道具的反应性：

 import { toRefs } from 'vue'

export default {
  setup(props) {
    const { courseId: trainingCourseId } = toRefs(props)
    return { trainingCourseId }
  }
}

或者 toRef() ：

 import { toRef } from 'vue'

export default {
  setup(props) {
    const trainingCourseId = toRef(props, 'courseId')
    return { trainingCourseId }
  }
}

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

const trainingCourseId = props.courseId;

它只是说你的 trainingCourseId 不是反应性的，这意味着如果父组件传入不同的 courseId ，你 的 trainingCourseId 超级清楚， props.courseId 将被更新，它只是你的 trainingCourseId 不更新）。

我想您发布的代码只是为了演示，因为在这种特定情况下，您实际上可以直接使用 courseId （在您的模板中），它将是反应式的。

然而，更大的问题仍然存在 - 为什么 courseId 是反应性的而 trainingCourseId 不是？文档不是说道具是反应对象吗？这里的反应性究竟是如何被破坏的？

需要明确的是，将属性重新分配给局部变量并不总是会消除 所有 的反应性（是的，一些反应性总是会丢失，但根据属性的形状，反应性的损失最初可能并不那么明显） .

Vue 3 使用 Proxy 来实现响应式。这个想法是，对于给定的原始数据对象： { courseId: "something" } ，Vue 创建另一个代理对象，它看起来就像给定的数据对象，但所有属性 getter 和 setter 都 被拦截。反应性来自这些截获的 getter 和 setter，因此与拥有 getter 和 setter 的对象相关联，而不是属性本身。

换句话说：

 const raw = { courseId: "something" };
const rxData = reactive(raw);

反应性是 rxData，而不是 courseId，这意味着对 rxData 属性（任何属性，不必是 courseId）的任何访问都是反应性的。但是，当您执行 const trainingCourseId = rxData.courseId 时， trainingCourseId 不是代理，它只是一个字符串（从代理中检索）。

当 courseId 不是一个简单的字符串而是一个对象时，这有点不同：

 const raw = { courseId: { name: "something" } };
const rxData = reactive(raw);
const trainingCourseId = rxData.courseId;

在构建反应式代理时，Vue 递归地转换原始原始数据对象。因此 rxData.courseId 在这种情况下实际上也是一个代理。如果您将 courseId 名称更改为 rxData.courseId.name = "something else" ，更改将反映在 trainingCourseId 中。但是，如果您通过 rxData.courseId = { name: "something else" } 重新分配 rxData.courseId，则此重新分配将对 trainingCourseId 不可见。

另一个答案中提到的 toRef 和 toRefs 方法将帮助您摆脱所有这些有趣的行为。但是如果你有兴趣，你可以查看 这个 关于 vue3 反应性的问题

原文由 Xinchao 发布，翻译遵循 CC BY-SA 4.0 许可协议