Vue中ref数组push操作无效的原因咨询

你遇到的问题核心是Vue响应式系统对ref数组变更的追踪时机与方式差异，具体原因如下：

• 当你直接调用this.#recentlyHoveredGeometriesProps.value.push(...)时，本质是修改了ref指向的数组的内部内容，但如果这个操作发生在组件响应式系统完全初始化之前（比如构造函数阶段），此时依赖收集还未启动，数组的变更不会被响应式系统捕获，导致listen()方法无法感知到数组内容的变化，仍然返回初始的空数组。

• 而采用「新建数组push值后赋值给ref.value」的方式（比如this.#recentlyHoveredGeometriesProps.value = [...oldArr, newItem]），是直接替换了ref的value引用。ref本身是响应式容器，修改其指向的引用会立即触发响应式系统的依赖更新，listen()方法就能捕获到新的数组内容。

另外补充两点注意事项：

• 如果是在Vue的class-style组件中，建议不要在构造函数中直接操作响应式数据，而是放在created或mounted钩子中执行，此时组件的响应式系统已经初始化完成，数组的变更方法（push、splice等）就能正常触发响应式更新。
• 确保this.#recentlyHoveredGeometriesProps是通过ref([])正确创建的响应式对象，而非普通数组。

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