这看起来只是一个技术细节。但当开发者把目光从“如何解决”转向“为什么会产生这个问题”时会发现它触及了 Vue 组件设计中一个深层的问题——数据所有权与副作用边界之间的张力。

问题复现——二次渲染的本质

执行过程

1. 组件挂载前articleTitle 和 articleDescription 初始值为空字符串。
2. 首次渲染子组件收到 { title: "",description: "" }完成第一次渲染。
3. 异步数据返回articleTitle.value = ... 触发 ref 的 setter。
4. 父组件重新渲染Vue 检测到响应式数据变化，重新执行父组件的 render 函数。话说回来，
5. 子组件二次渲染子组件因为 props 变化而 更新。 显示正确内容，话说回来，

结果子组件渲染了两次。

为什么需要关注这个问题？

并非所有场景都需要关注二次渲染。但在以下情况中，它会成为实际问题：

• 子组件内部开销较大图表库、大量 DOM 计算等重复执行，造成性能浪费。其实，
• 子组件依赖 props 发起副作用比如 watchEffect 根据 props 去请求图片或接口。导致请求重复发送，
• 动画或过渡异常元素从无到有。又从有到空再到有，造成视觉闪烁。
• 表单组件收到两次初始值可能导致使用者输入被意外重置。

一个常见的“改进”及其设计困境

面对上述问题。很多开发者会做出一个看似更优的选择：

子组件内部的观点是，