关于修改props属性的问题

[Carloslst]

官方文档推荐的是数据单项流思想，也就是在子组件不能直接修改props的属性，也就是父/祖父,传递过来的值，但是有些场景直接修改props里面的属性会变得简单的多，有些场景用emit方式/vuex不太好处理，反而直接修改props里面的属性更便捷，而且也没有发生什么事，请问下这种做法是否可取？既然不推荐直接修改props的属性，那么为什么这种写法会生效并且存在。

[chenxch]

推荐不等于强制。

虽然不推荐直接修改props的属性，但是这种写法在Vue中是允许的，并且会生效。这是因为Vue在处理props时，会将其转换为响应式的数据，从而使得当props的值发生变化时，子组件会自动更新。因此，如果你直接修改props的属性，虽然不符合Vue的单向数据流的原则，但是Vue仍然会将其视为一个普通的数据变化，从而使得子组件重新渲染。

然而，直接修改props的属性可能会导致父组件的状态变得不可预测，因此不推荐这种做法。如果你确实需要在子组件中修改props的值，可以考虑使用一个本地的数据属性来保存props的值，并在子组件中对本地数据属性进行修改，然后通过emit方法将修改后的值传递给父组件。这样既可以遵循单向数据流的原则，又可以实现你的需求。

[Carloslst]

推荐不等于强制。

虽然不推荐直接修改props的属性，但是这种写法在Vue中是允许的，并且会生效。这是因为Vue在处理props时，会将其转换为响应式的数据，从而使得当props的值发生变化时，子组件会自动更新。因此，如果你直接修改props的属性，虽然不符合Vue的单向数据流的原则，但是Vue仍然会将其视为一个普通的数据变化，从而使得子组件重新渲染。

然而，直接修改props的属性可能会导致父组件的状态变得不可预测，因此不推荐这种做法。如果你确实需要在子组件中修改props的值，可以考虑使用一个本地的数据属性来保存props的值，并在子组件中对本地数据属性进行修改，然后通过emit方法将修改后的值传递给父组件。这样既可以遵循单向数据流的原则，又可以实现你的需求。

你好，因为我这边组件的属性结构比较复杂，组件也较多，还有一些嵌套的组件，也有考虑过vuex/pinia(看起来处理数据维护不太友好)。我每个组件的props里面的config都有ts类型约束，可以明确是哪个组件，在这样的前提下通过改props里面的属性操作起来更加简便，这样的做法让我感到疑惑，又想不到更好的方案，请问能否帮我解惑下，谢谢了

[chenxch]

有类型约束确实是可以更规范一些，但不能解决潜在的问题。单向数据流的优势就是在于排查问题上可以从上到下排查，如果每一层都可以修改传递的数据，那排查问题的时候根本不知道是哪一层修改了这个原数据导致报错。而且可能会导致组件不是那么好的复用组合。

[edison1105]

其实vue3里面可以做到，但是比较难落地。vuejs/rfcs#279

[Carloslst]

这确实是个问题，但也确实省了不少代码，在vue3里面倒是能够去实现较好的form，就是不符合规范

[yetrun]

我抛出一个例子，使用例子来说明可能最直观一点。楼主的用法也是我经常在项目中用的，最常用在封装的一个特定模型的表单组件中：

<!-- UserForm.vue -->
<template>
  <form @submit="submit">
    <input type="text" v-model="user.name">
    <input type="number" v-model="user.age">
    <button type="submit">Submit</button>
  </form>
</template>

<script setup lang="ts">
const props = defineProps<{
  syncUser: { name: string, age: integer } // 取这么个属性名是为了向调用者告知一下内部的属性值会被子组件改掉
}>()
const emit = defineEmits{
  (e: 'submit': user: { name: string, age: integer })
}()
const user = computed(() => props.syncUser)

function submit() {
  emit('submit', props.user)
}
</script>

调用者如果没有什么特殊的要求，则直接使用即可：

<template>
  <UserForm :sync-user="user" @submit="submit"></UserForm>
</template>

<script setup lang="ts">
const user = ref({ name: '', age: 0 })
const submit = async function(user) {
  await remoteSave({ user: user })
}
</script>

如果按照 Vue 官方推荐的不要修改属性的值的方式，大伙可以再贴一段代码比较一下。如果代码复杂度没有提高，则可以推荐官方的做法。如果代码复杂度确实提高了，那这种办法还是有方便的地方。我现在只有一个疑问，官方教程中说到：

当对象或数组作为 props 被传入时，虽然子组件无法更改 props 绑定，但仍然可以更改对象或数组内部的值。这是因为 JavaScript 的对象和数组是按引用传递，而对 Vue 来说，禁止这样的改动，虽然可能生效，但有很大的性能损耗，比较得不偿失。

这里说的是有较大的性能损失，这是因为什么呢？现在 Vue 3 应该没有这种奇怪的限制了吧。还是说官方为了吸引我们不要修改对象属性而故意吓我们的一种说法？

[so11y]

如果这个user中比如name，在父组件中使用了，然后子组件比如input中修改了这个name，那么这个时候势必父和子都会进行更新，这个时候更新父是完全没有必要的，完全可以一开始把name放在一个ref中，然后在input修改，等待最终这个子组件修改完成提交的时候，比较提交按钮的时候，在把这个数据提交到父级。