为什么这样传递参数无法触发组件的渲染?

[Lin9672]

Link to minimal reproduction

https://play.vuejs.org/#eNqVVE9v00gU/ypPvthVU2dZFmmVpt1l2R52D4CAoyXk2C+JW2c8mhmniaJIiD8SHEBIoB7gAhJFHAD1gJCglfgydRDfgjczcexAKSJSkpn39/fe/N6bOOc594c5Oi2nLSORcAUSVc43A5YMeCYUTEBgtwExdhOG5+WYRRcy0jBkqgH9huyHaZrtXtE2u6GK+lvdLkYKptAV2QBciu0uYmnPM3OF3zQ3ndxdD1jAooxJBQMUPbwsMi5hQ2f2JqBQKi1BocYtcL+83Ju9fv75ye3ixpEL0xVytq5RljM19/qtEvdDFqd4gf56SFpvBTY2YRIwqOXyh2Gao1/PRKbu7Om72d5B8fBBmW3VJrHmq6uUY1pB/3fMwkFStYciVN3xVrRhrUNeDYj2z1L006znucXdp8Xhx+Lo5uzN/ufD28eH713yhe/CWxCU5KSn8UxcgDQLYxStedUMd4HqGyQSPU8g5RxihUJ/5kLP48vybzGW6Agp9YbrHroN4LrrpYMgHgkGfc+8cwMmuruXOttUewu4eTdruDhOTZ36V3/bTUtIoiJdFA54GiqkG0A7ToYg1TjFjcCJE0kaYkY3xdG6+V2LE0Fpkoy1CHeaD9g69ELegj/5aD1wTAwdxXZ0LVq82HCtk7CYglbUCJxmad/JlcoY/B2lSbRDRnVmUdTjT29njz8UL/a+3Hp1fPSsuLNPramKbjetv62gSSXQqd2sFeY0HCWpz92k52/LjNFQmgcIHI0wSVFc4roowtQqnyZwDMP+NzIlcmyU8qiP0c4J8m050rLAuUyPjWJI0Bc6FVLZyqq3rl7EEZ0XykEW5ylZn6K8oumTa4zW7J9cd0jU7Aza/8w6SFjvmtwaKWSyLEoDNRww9oFDy0Gz50elV3DP+n8YP6IOdXGxWU5Ya7XFZqZxaVMtloZh9GK2DBHsSNVJPMehxhxbYIUlCDPtyyPz5qGdZru/Zg/2Z4/fF3cPauNjs+pp+Bn3ozSUkhjYE1nOa4Q2nLJTVQfa5gI3J7UBnE7bTS2b+83JeEqMpdV4QsC/lgxOCf/tDNnFVO+UaYIJZ0OvUH2ze4+K+we/Mkt0NQuCjr7pkn2t5WWhJT/YF1pVrQy6dDJhNuk5PgLCmsTQScNox+h4GMfE5tKYCEAPaLITGa8PUWiCExfP+uf8M787068VOK/n

点击按钮更新外部传入的testObject，子组件的视图没有更新，打印子组件接收到的props可以发现props的值已经变化了，这是为什么?

[jh-leong]

resolve((p) => {
  console.log('异步组建的props', p);
  return h(Comp1, { testObject: p }); // <--
});

因为例子中 Comp1 的 props 没有改变过，testObject 一直都是传入的 p (同一个对象 instance.props)，所以 Comp1 组件不会更新。

你可以这样改：Playground

[jh-leong]

例2中我在Comp1的props中增加了空对象a，每次点击按钮都会触发Comp1的更新，我理解是a这个空对象在每次执行渲染函数时都会重新创建，所以每次都是新的会触发Comp1更新。

理解对的，传给 Comp1 的 props 改变了，所以父组件会触发 Comp1 的更新；

{ testObject: p }这个对象的新旧不影响Comp1的更新，其子属性的新旧则会影响Comp1的更新，这样的理解正确吗？

这里不对，例 2 传入的 testObject 并不是响应式对象，所以不会影响 Comp1 内部的更新；

以及例3我尝试直接绑定testObject为mergeProps，Comp1直接使用p作为props，这时候传入的p仍然是不变的，但却能够触发Comp1的更新。同样都是使用mergeProps这个Ref对象，为什么一个能够触发Comp1的更新一个却不能😵‍💫……

例 3 中，传入的 p.testObject 是个响应式对象（即父组件定义的 mergeProps）；而 Comp1 内部依赖了这个响应式对象，所以当 testProperty 更新的时候，Comp1 会更新

你可以对比下两个示例向 Comp1 传入的 testObject：

resolve((p) => {
  console.log('异步组建的props', p, isReactive(p.testObject)); // <--
  return h(Comp1, p);
});

[JohnieXu]

例 3 中，传入的 p.testObject 是个响应式对象（即父组件定义的 mergeProps）；而 Comp1 内部依赖了这个响应式对象，所以当 testProperty 更新的时候，Comp1 会更新

你可以对比下两个示例向 Comp1 传入的 testObject：

resolve((p) => {
console.log('异步组建的props', p, isReactive(p.testObject)); // <--
return h(Comp1, p);
});

打印发现：p.testObject是undefined，play
请问，是不是resolve回调中的p不是响应式对象，return h(Comp1, {testObject: p, a: {}}); 这里将p这个非响应式对象传递给了Comp1的props.testObject？

[Lin9672]

例2中我在Comp1的props中增加了空对象a，每次点击按钮都会触发Comp1的更新，我理解是a这个空对象在每次执行渲染函数时都会重新创建，所以每次都是新的会触发Comp1更新。

理解对的，传给 Comp1 的 props 改变了，所以父组件会触发 Comp1 的更新；

{ testObject: p }这个对象的新旧不影响Comp1的更新，其子属性的新旧则会影响Comp1的更新，这样的理解正确吗？

这里不对，例 2 传入的 testObject 并不是响应式对象，所以不会影响 Comp1 内部的更新；

以及例3我尝试直接绑定testObject为mergeProps，Comp1直接使用p作为props，这时候传入的p仍然是不变的，但却能够触发Comp1的更新。同样都是使用mergeProps这个Ref对象，为什么一个能够触发Comp1的更新一个却不能😵‍💫……

例 3 中，传入的 p.testObject 是个响应式对象（即父组件定义的 mergeProps）；而 Comp1 内部依赖了这个响应式对象，所以当 testProperty 更新的时候，Comp1 会更新

你可以对比下两个示例向 Comp1 传入的 testObject：

resolve((p) => {
  console.log('异步组建的props', p, isReactive(p.testObject)); // <--
  return h(Comp1, p);
});

我似乎明白了。

在最初的例子中，{ testObject: p }中的p虽然是用响应式对象mergeProps传入的，但作为p传入后仅仅只是个代理对象而非响应式对象。p只是代理对象，也不存在子属性是响应式对象被依赖，所以p的变化不会触发Comp1的更新。

例2中{ testObject: p, a: {} }，p是个代理对象，但因为a每次都是新创建的，所以每次都会触发Comp1更新。

例3中p是个代理对象，而p的子属性testObject是个响应式对象，Comp1内部依赖了这个响应式对象，所以每次都会触发Comp1更新。
这个例子中v-bind:testObject="mergeProps"和v-bind="{ testObject: mergeProps }"的效果是相同的，在渲染函数中p都不是响应式对象，而p.testObject都会是响应式对象，都能触发Comp1的更新。如果不使用渲染函数的入参p，而直接将Ref、ComputedRef类型的对象作为Comp1的props传入也能够触发更新，因为这样子Comp1的props就是响应式的。

是这样子嘛？

[Lin9672]

例 3 中，传入的 p.testObject 是个响应式对象（即父组件定义的 mergeProps）；而 Comp1 内部依赖了这个响应式对象，所以当 testProperty 更新的时候，Comp1 会更新
你可以对比下两个示例向 Comp1 传入的 testObject：
resolve((p) => {
console.log('异步组建的props', p, isReactive(p.testObject)); // <--
return h(Comp1, p);
});

打印发现：p.testObject是undefined，play 请问，是不是resolve回调中的p不是响应式对象，return h(Comp1, {testObject: p, a: {}}); 这里将p这个非响应式对象传递给了Comp1的props.testObject？

你被我搞糊涂了😂，mergeProps中没有testObject，是在调用h时拼接上testObject的，p.testObject确实是undefined没毛病……

[JohnieXu]

😂😂