Props state is not synced to the client from SSR when changed in onBeforeMount hook

[AndrewBogdanovTSS]

Vue version

3.2.25

Link to minimal reproduction

https://stackblitz.com/edit/github-nevztk?file=src/pages/Home.vue

Steps to reproduce

• Create isRed boolean reactive value using script setup
• Set css class conditionally based on the value of isRed
• Change the value of isRed in the onBeforeMount hook from false to true

What is expected?

• DOM node text value is updated to true
• .red class is applied to a DOM node

What is actually happening?

• DOM node text value is updated to true
• .red class is NOT applied to a DOM node

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.2.25 => 3.2.47

Any additional comments?

When using onMounted hook issue is not present

[baiwusanyu-c]

I don't think this is a bug. In fact, the hydration process happens between onBeforeMount and onMounted. So when you modify variables in onBeforeMount, it will cause a mismatch between vnode and dom, resulting in hydration failure, so I It is recommended not to modify variables until hydration is complete.

[skirtles-code]

I've created a similar example in the SFC Playground:

SFC Playground

Toggling the SSR button between ON and OFF, the rendered content changes between black and red. That maybe isn't a surprise given the use of beforeMount. However...

There isn't any warning about the hydration mismatch. Adding a warning for attributes and properties might be tricky, but if it can't be handled in the general case then maybe it's still worth handling the most common cases, like class?

[skirtles-code]

Since 3.4.0, the Playground I shared above does show hydration mismatch warnings. The warning includes the following note:

Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
You should fix the source of the mismatch.

In my opinion, there's nothing more that needs to be done here. beforeMount runs before hydration and should not be used to make any changes that lead to hydration mismatches. That said, it would be useful to have a way to detect when a component is hydrating, e.g. #1723.