Vue子组件以对象字面量为props时父渲染意外更新的原因及安全性疑问

嘿，这个问题其实涉及到Vue的响应式检测逻辑和JavaScript的对象引用特性，咱们一步步说清楚：

现象背后的核心原因 #

1. 对象字面量的引用特性 #

当你在模板里写 <child :prop1="{ foo: 'bar' }"></child> 时，每次父组件重新渲染，这个{ foo: 'bar' }都会被重新创建成一个全新的对象——也就是说，它的内存引用地址和上一次渲染时的对象完全不一样。

Vue在判断props是否变化时，默认会用引用相等性来对比：新的对象引用≠旧的对象引用，所以Vue会判定prop1发生了变化，进而触发子组件的更新和对应的监听器。

2. 对象引用传递的情况 #

如果父组件是把一个已有的对象引用传给子组件，比如：

<script>
export default {
  data() {
    return {
      parentObj: { foo: 'bar' }
    }
  }
}
</script>
<template>
  <child :prop1="parentObj"></child>
</template>

这时每次父组件渲染，传递给子组件的都是同一个parentObj的引用。只要这个对象的内部属性没有发生响应式变化（或者说对象本身的引用没换），Vue对比后会认为prop1没有变化，自然不会触发子组件的更新。

使用对象/数组字面量作为props的风险 #

这种写法确实存在不少潜在问题，主要集中在以下几点：

• 不必要的性能损耗：哪怕字面量的内容完全没变化，父组件每渲染一次就会生成新的引用，导致子组件被迫重复更新。如果子组件结构复杂，或者父组件需要频繁渲染（比如监听滚动、输入事件），会明显拖慢页面性能。
• 意外的副作用触发：如果子组件里有监听props变化的逻辑（比如watch里发起请求、操作DOM），这种无意义的props变化会导致这些逻辑被重复执行，可能引发bug或者浪费资源。
• 调试难度提升：有时候你会陷入“明明数据没改，子组件怎么又更新了”的困惑，排查这类问题需要额外花时间定位到是字面量引用变化导致的。

小建议 #

如果要传递固定的对象/数组，建议把它放到父组件的data或者computed里，复用同一个引用；如果是需要动态生成的对象，用computed来缓存，只有当依赖的数据源变化时才生成新对象，避免不必要的更新。

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