Vue 2.6：为何子组件修改对象类型prop不触发警告还同步父组件？

观察到的实际现象 #

• 官方规则背景：Vue 官方明确要求避免子组件直接修改prop，违反时会抛出固定警告 "Avoid mutating a prop directly since the value will be overwritten...."
• 基础类型Prop的表现：
  父组件定义字符串类型的data字段：

  // 父组件 data 定义
  exemple: "Hello World"
  

  将该字段作为prop传入子组件后，子组件执行直接赋值操作：

  // 子组件内部逻辑
  this.exemple = "Hello World!"
  

  会正常触发上述prop修改警告，完全符合官方预期。
• 引用类型Prop的表现：
  父组件将同名字段调整为对象类型的data：

  // 父组件 data 定义
  exemple: { message: "Hello World" }
  

  同样将该字段作为prop传入子组件后，子组件执行对象内部属性的修改操作：

  // 子组件内部逻辑
  this.exemple.message = "Hello World!"
  

  既不会触发任何prop修改的警告，还会直接同步更新父组件的对应数据。

核心问题解答 #

为什么两种Prop修改场景的表现差异极大？ #

Vue 的prop修改警告触发逻辑非常简单：它仅检测对子组件实例上prop属性本身的直接重新赋值，不会深度追踪prop内部的属性变更。

当你执行this.exemple = "新值"时，本质是直接覆盖了子组件实例上绑定prop的那个属性，这个操作会被Vue的响应式拦截器直接捕获，触发警告；但如果你是通过this.exemple拿到对象引用，再修改引用指向对象的内部字段，全程没有对this.exemple这个属性本身做重新赋值，自然不会触发警告。

为什么对象类型Prop的修改会同步到父组件？ #

这种同步本质和Vue的绑定逻辑无关，核心是JavaScript本身的变量存储规则：

• 基础类型（字符串、数字、布尔值等）是按值传递的，子组件拿到的prop值是和父组件完全独立的副本，修改这个副本完全不会影响父组件的原始值
• 对象、数组这类引用类型，传递时共享的是指向堆内存地址的引用，父子组件拿到的是同一个内存地址的指针，不管哪一方修改这个对象的内部属性，操作的都是同一份共享内存中的数据，自然会同步更新两边的关联视图。

该现象是否与JavaScript的变量存储方式有关？ #

完全相关。这种行为就是JS按值/按引用传递的存储规则直接导致的，Vue本身并没有对对象类型的prop做深拷贝来切断这种共享引用——毕竟对于体积较大的对象、数组来说，深拷贝带来的性能开销是完全无法接受的。

这种写法是否属于良好实践？ #

绝对不属于。哪怕这种写法不会触发警告、能正常运行，也存在非常多的隐患：

• 彻底破坏了Vue单向数据流的设计规则，数据流向变得混乱，后续定位数据变更来源时根本无法追溯，大幅提升调试成本
• 当父组件后续因为其他逻辑，将这个prop替换为全新的对象引用时，子组件之前在原对象上做的所有修改都会被直接覆盖，出现不可预期的UI闪烁、状态丢失问题
• 会让子组件和父组件的内部数据结构形成强耦合，一旦父组件调整对象的字段结构，所有偷偷修改过这个对象的子组件都会出现bug，组件的可复用性会完全丧失。

内容的提问来源于stack exchange，提问作者Francois