为什么要使用 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
  }
}

我在 2 个场景中有 2 个问题：

当 props.user 已经反应时
如果它在任何祖先中发生变化，它的值都会发生变化，那么为什么我们需要使用toRefs？它不是已经反应了吗？
如果它不是响应式的，它只是一个原始字符串值
使其具有反应性是否意味着我们要改变它的价值？我认为使对象具有反应性也意味着欢迎更改其值。但是所有的指南和 linter 都警告我们最好不要更改 props 值。（因为不要写入计算值或其他东西）

如果我可以直接在组件中更改 props 值，我就不再需要每次都将更改发送到父组件。这很方便，但我不知道什么时候在我们确定它变成反应式后更改道具值是个好主意？

Answer 1

由于 props 不应该被改变，这对于 the documentation 中解释的特定情况很有用；从 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);
}

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

Why using toRef(props) and is it good idea to change their value in CompositionAPI?

javascript

vue.js

vuejs3

vue-composition-api