docs: add tip for data-allow-mismatch attribute

vuepress · Sep 3, 2024 · b138d62 · b138d62
1 parent 5556d9a
commit b138d62
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/docs/reference/components.md b/docs/reference/components.md
@@ -97,6 +97,10 @@ interface AutoLinkConfig {
   - Modify the component to only access Browser / DOM APIs in `onBeforeMount()` or `onMounted()` hook.
   - Wrap the component with `<ClientOnly>`.
 
+:::tip
+Since Vue 3.5, if you only want to avoid hydration mismatch, you can try the new [data-allow-mismatch](https://blog.vuejs.org/posts/vue-3-5#data-allow-mismatch) attribute instead of `<ClientOnly>` component.
+:::
+
 ## Content
 
 - Props:

diff --git a/docs/zh/reference/components.md b/docs/zh/reference/components.md
@@ -97,6 +97,10 @@ interface AutoLinkConfig {
   - 修改这个组件，只在 `onBeforeMount()` 或 `onMounted()` Hook 中使用 浏览器 / DOM API 。
   - 使用 `<ClientOnly>` 包裹这个组件。
 
+:::tip
+从 Vue 3.5 开始，如果你只是想避免 Hydration Mismatch ，可以尝试使用新的 [data-allow-mismatch](https://blog.vuejs.org/posts/vue-3-5#data-allow-mismatch) 属性来代替 `<ClientOnly>` 组件。
+:::
+
 ## Content
 
 - Props: