使用Vue渲染函数传递Props时无法响应的问题排查

问题 #

期望子组件表现与父组件一致，通过渲染函数传递Props时发现无响应式，代码如下：

const submitting = ref('...');
const childComponent = h(ChildComponent, { loading: submitting.value });

return () => h('div', props, [slots.default(), childComponent]);

原因 #

1. 直接读取submitting.value得到的是静态快照值，不会随ref更新自动变化。
2. childComponent定义在渲染函数外部，仅初始化一次，后续响应式变量更新时不会重新生成，无法获取最新props值。

解决方案 #

将子组件的创建逻辑移至渲染函数内部，确保每次响应式变量更新时，渲染函数重新执行并传递最新的props值：

const submitting = ref('...');

return () => h('div', props, [
  slots.default(),
  h(ChildComponent, { loading: submitting.value })
]);

当submitting的值变化时，Vue会追踪到渲染函数中的依赖，触发重新渲染，此时submitting.value会获取最新值并传递给子组件，Props就具备响应式了。

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