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

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.

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?