fix(hydration): v-bind supports hydration

packages/runtime-core/src/component.ts

@@ -519,6 +519,12 @@ export interface ComponentInternalInstance {
    * @internal
    */
   ut?: (vars?: Record<string, string>) => void
+
+  /**
+   * For getCssVars on hydration
+   * @internal
+   */
+  getCssVars?: () => Record<string, string>
 }
 
 const emptyAppContext = createAppContext()

packages/runtime-core/src/hydration.ts

@@ -447,9 +447,13 @@ export function createHydrationFunctions(
           !optimized ||
           patchFlag & (PatchFlags.FULL_PROPS | PatchFlags.NEED_HYDRATION)
         ) {
+          const cssVars = parentComponent?.getCssVars?.()
           for (const key in props) {
             // check hydration mismatch
-            if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
+            if (
+              __DEV__ &&
+              propHasMismatch(el, key, props[key], vnode, cssVars)
+            ) {
               hasMismatch = true
             }
             if (
@@ -718,6 +722,7 @@ function propHasMismatch(
   key: string,
   clientValue: any,
   vnode: VNode,
+  cssVars?: Record<string, string>,
 ): boolean {
   let mismatchType: string | undefined
   let mismatchKey: string | undefined
@@ -748,6 +753,11 @@ function propHasMismatch(
         }
       }
     }
+    if (cssVars) {
+      for (const key in cssVars) {
+        expectedMap.set(key, cssVars[key])
+      }
+    }
     if (!isMapEqual(actualMap, expectedMap)) {
       mismatchType = mismatchKey = 'style'
     }

packages/runtime-dom/src/helpers/useCssVars.ts

@@ -32,6 +32,10 @@ export function useCssVars(getter: (ctx: any) => Record<string, string>) {
     ).forEach(node => setVarsOnNode(node, vars))
   })
 
+  if (__DEV__ && __SSR__) {
+    instance.getCssVars = () => fommaterVars(getter(instance.proxy))
+  }
+
   const setVars = () => {
     const vars = getter(instance.proxy)
     setVarsOnVNode(instance.subTree, vars)
@@ -88,3 +92,10 @@ function setVarsOnNode(el: Node, vars: Record<string, string>) {
     ;(style as any)[CSS_VAR_TEXT] = cssText
   }
 }
+function fommaterVars(vars: Record<string, string>) {
+  const cssVars: Record<string, string> = {}
+  for (const key in vars) {
+    cssVars[`--${key}`] = vars[key]
+  }
+  return cssVars
+}