Vue组件prop默认值被实例永久覆盖是否为预期行为？

这绝对不是Vue prop默认值的预期行为，肯定是你代码里存在其他逻辑导致了这个异常情况。

核心逻辑说明 #

Vue组件的props是实例级独立的：每个组件实例的props状态都是完全隔离的，默认值只会在当前实例未传入该prop时生效。某个实例通过父组件传入特定prop值，完全不会影响其他组件实例的prop取值。

排查方向 #

你可以从这几个角度检查代码：

• 有没有把editable和全局状态（比如Pinia/Vuex、全局变量）绑定？比如在组件内部把props.editable赋值给了全局状态，反过来全局状态又覆盖了prop的取值，这种情况会导致所有实例共享同一个状态。
• 有没有在组件内部直接修改了editable prop？Vue规定props是单向数据流，不能直接修改，如果通过ref包装或者其他方式绕开了限制，可能会引发意外的状态污染。
• 是不是多个父组件共享了同一个响应式变量作为editable的传值？比如多个父组件都用了同一个const isEditable = ref(false)传给:editable，那这个变量变化时所有实例都会跟着变，但这是父组件状态共享的问题，和组件默认值无关。

验证方法 #

创建一个完全独立的测试父组件，只导入my-component且不传入editable prop，运行后查看该实例的editable值：

<!-- TestParent.vue -->
<template>
  <my-component />
</template>

<script setup>
import MyComponent from './my-component.vue'
</script>

如果这个实例的editable是true，就说明之前的异常是其他业务逻辑导致的；如果还是false，那要检查my-component内部有没有硬编码修改editable的逻辑。

内容的提问来源于stack exchange，提问作者Artur Müller Romanov