直接从 vue 3 设置中获得的道具不是反应式的答案

【问题标题】：Props gotten directly from vue 3 setup are not reactive直接从 vue 3 设置中获得的道具不是反应式的
【发布时间】：2021-12-19 15:52:51
【问题描述】：

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

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

父组件

<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 };
  },
});

我该如何解决这个问题？

【问题讨论】：

这可能是您的解决方案吗？ Why is this Vue prop not reacting to change?。如果没有，请分享上面提到的错误消息。
@PeterKrebs 错误消息在问题中，但由于格式不佳而有些隐藏。我已经解决了。

标签： vue.js vuejs3 reactive vue-props

【解决方案1】：

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

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 }
  }
}

【讨论】：

【解决方案2】：

const trainingCourseId = props.courseId;

它只是说你的trainingCourseId 没有反应。

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

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

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

Vue 3 使用代理来实现反应性。这个想法是，对于给定的原始数据对象：{ 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 方法将帮助您摆脱所有这些有趣的行为。但如果你有兴趣，可以查看this question 关于 vue3 反应性

【讨论】：