3.5: data-allow-mismatch

src/api/ssr.md

@@ -220,3 +220,23 @@
   }
   </script>
   ```
+
+## data-allow-mismatch <sup class="vt-badge" data-text="3.5+" /> {#data-allow-mismatch}
+
+[ハイドレーション・ミスマッチ](/guide/scaling-up/ssr#hydration-mismatch) の警告を抑制するために使用できる特別な属性です。
+
+- **例**
+
+  ```html
+  <div data-allow-mismatch="text">{{ data.toLocaleString() }}</div>
+  ```
+
+  この値で特定のタイプのミスマッチを許可することができます。指定できる値は以下の通りです:
+
+  - `text`
+  - `children`（直下の子要素に対してのみミスマッチを許可します）
+  - `class`
+  - `style`
+  - `attribute`
+
+  値を指定しない場合、すべてのタイプのミスマッチが許可されます。

src/guide/scaling-up/ssr.md

@@ -314,6 +314,10 @@ Pinia のような状態管理ライブラリーは、このことを念頭に
 
 Vue は、ハイドレーション・ミスマッチになった時は、クライアント側の状態に合わせてプリレンダリングされた DOM を調整するよう自動的にリカバリーします。不正なノードの破棄と新しいノードのマウントのためレンダリングのパフォーマンスが多少低下しますが、ほとんどの場合、アプリケーションは期待通りに動作し続けるはずです。とはいえ、開発中にハイドレーションの不一致を解消するのがベストであることに変わりはありません。
 
+#### ハイドレーション・ミスマッチの警告を抑制する <sup class="vt-badge" data-text="3.5+" /> {#suppressing-hydration-mismatches}
+
+Vue 3.5+ では、[`data-allow-mismatch`](/api/ssr#data-allow-mismatch) 属性を使用して、避けられないハイドレーション・ミスマッチの警告を選択的に抑制することができます。
+
 ### カスタムディレクティブ {#custom-directives}
 
 ほとんどのカスタムディレクティブは直接 DOM を操作する処理を含んでいるので、SSR の間は無視されます。しかしながら、カスタムディレクティブがどのようにレンダリングされるかを指定したい場合（例えば、どの属性をレンダリングされる要素に追加するか）は、`getSSRProps` ディレクティブフックを使用することができます: