fix(hmr): fix render error in change static nodes (#6978)

[zhangzhonghe]

fix #6978
fix #7138

[netlify]

❌ Deploy Preview for vuejs-coverage failed.

Name	Link
🔨 Latest commit	73dd0d1
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs-coverage/deploys/636f2f1956f1a6000856cbbe

[lloydtao]

hey! any update on getting this change rolled out? 😅

it's still a pain to deal with this bug, and the fix looks good to go 😸

[oceangravity]

hey! any update on getting this change rolled out? 😅

it's still a pain to deal with this bug, and the fix looks good to go 😸

It seems like the core team is waiting for the release of Vapor mode.

🙄

[pikax]

Not sure if we should do always this, I wonder if we should change children to be cloned: children = (children as VNode[]).map(deepCloneVNode)

I also wonder if the condition is correct, that way we are unnecessarily adding a new array every time, from this example alone we could do something like:

if (
    __DEV__ &&
    (patchFlag === PatchFlags.HOISTED ||
      patchFlag === PatchFlags.UNKEYED_FRAGMENT) &&
    isArray(children)
  )

But not certain if that will fix every case 🤔

[yyx990803]

Thanks a lot for the PR, it correctly identifies the cause of the problem, but I think a more ideal fix would be to only clone the children array when we know for sure it's hoisted. Unfortunately there isn't a really easy check to do this from runtime, so I implemented a compile-time fix where the hoistStatic transform directly generates code that clones the array if we know we are compiling for HMR. See 7334376