为什么使用 toRef(props) 以及在 CompositionAPI 中更改它们的值是个好主意吗？

Question

我经常在 CompositionAPI 中看到一种使用 props 的模式，即使用 toRefs 来创建 props 的所有条目ref。我对此有点困惑。

例如，来自 Vue 3 官方指南：

export default {
  props: {
    user: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const { user } = toRefs(props)

    //... use user's value
  }
}

我有两个场景的两个问题：

1. 当 props.user 已经是反应性的时，
   如果它在任何祖先中发生变化，它的值也会改变，那么为什么我们需要使用toRefs？不是已经反应过来了吗？

2. 如果它不是响应式的，那么它只是一个原始字符串值。
   使其响应式是否意味着我们要更改它的值？我认为使对象具有反应性也意味着它的值值得改变。但所有指南和 linter 都警告我们最好不要更改 props 值。（不要写入计算值或其他值）

如果我可以直接在组件中更改 props 值，我不再需要每次都向父组件发出更改。这很方便，但我不知道在我们确定它变为反应性后，何时更改 props 值是个好主意？

Answer 1

由于 props 不应该被改变，这对于文档中解释的特定情况很有用；从 prop 计算出的 ref 需要作为参数传递：

const { user } = toRefs(props)
// or
// const user = computed(() => props.user)

someFunction(user);

当函数使用组合 API 或由于其工作方式只需要通过引用而不是通过值传递参数时，例如：

function someFunction(val) {
  setTimeout(() => {
    console.log('Up-to-date value:', unref(val));
  }, 1000);
}