From a9a703a2c71fba06b593bc1e0de7ade8d8147b1d Mon Sep 17 00:00:00 2001
From: GU Yiling <justice360@gmail.com>
Date: Tue, 10 Sep 2024 12:21:57 +0800
Subject: [PATCH] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 时瑶 <26200808+KiritaniAyaka@users.noreply.github.com>
---
 src/guide/extras/web-components.md      |  4 ++--
 src/guide/scaling-up/ssr.md             |  4 ++--
 src/guide/typescript/composition-api.md | 18 +++++++++---------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md
index e5b615611..95839733d 100644
--- a/src/guide/extras/web-components.md
+++ b/src/guide/extras/web-components.md
@@ -171,9 +171,9 @@ document.body.appendChild(
 
 [Provide / Inject API](/guide/components/provide-inject#provide-inject) 和[相应的组合式 API](/api/composition-api-dependency-injection#provide) 在 Vue 定义的自定义元素中都可以正常工作。但是请注意，依赖关系**只在自定义元素之间**起作用。例如一个 Vue 定义的自定义元素就无法注入一个由常规 Vue 组件所提供的属性。
 
-#### 应用程序级配置 <sup class="vt-badge" data-text="3.5+" /> {#app-level-config}
+#### 应用级配置 <sup class="vt-badge" data-text="3.5+" /> {#app-level-config}
 
-您可以使用 `configureApp` 选项来配置 Vue 自定义元素的应用程序实例：
+你可以使用 `configureApp` 选项来配置 Vue 自定义元素的应用实例：
 
 ```js
 defineCustomElement(MyComponent, {
diff --git a/src/guide/scaling-up/ssr.md b/src/guide/scaling-up/ssr.md
index a939872b4..3250aa755 100644
--- a/src/guide/scaling-up/ssr.md
+++ b/src/guide/scaling-up/ssr.md
@@ -314,9 +314,9 @@ export function createApp() {
 
 当 Vue 遇到激活不匹配时，它将尝试自动恢复并调整预渲染的 DOM 以匹配客户端的状态。这将导致一些渲染性能的损失，因为需要丢弃不匹配的节点并渲染新的节点，但大多数情况下，应用应该会如预期一样继续工作。尽管如此，最好还是在开发过程中发现并避免激活不匹配。
 
-#### 抑制水合不匹配 <sup class="vt-badge" data-text="3.5+" /> {#suppressing-hydration-mismatches}
+#### 消除激活不匹配 <sup class="vt-badge" data-text="3.5+" /> {#suppressing-hydration-mismatches}
 
-在 Vue 3.5+ 中，可以使用 [`data-allow-mismatch`](/api/ssr#data-allow-mismatch) 属性有选择地抑制无法避免的水合不匹配。
+在 Vue 3.5+ 中，可以使用 [`data-allow-mismatch`](/api/ssr#data-allow-mismatch) attribute 有选择性地消除无法避免的激活不匹配警告。
 
 ### 自定义指令 {#custom-directives}
 
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 3f71c4f87..8e15e71c0 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -68,7 +68,7 @@ const props = defineProps<Props>()
 
 ### Props 解构默认值 {#props-default-values}
 
-当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。可以通过使用[响应式 Props 解构](/guide/components/props#reactive-props-destructure)解决这个问题。 <sup class="vt-badge" data-text="3.5+" />:
+当使用基于类型的声明时，我们失去了为 props 声明默认值的能力。可以通过使用[响应式 Props 解构](/guide/components/props#reactive-props-destructure)解决这个问题。 <sup class="vt-badge" data-text="3.5+" />：
 
 ```ts
 interface Props {
@@ -96,7 +96,7 @@ const props = withDefaults(defineProps<Props>(), {
 这将被编译为等效的运行时 props `default` 选项。此外，`withDefaults` 帮助程序为默认值提供类型检查，并确保返回的 props 类型删除了已声明默认值的属性的可选标志。
 
 :::info
-请注意，在使用 `withDefaults` 时，默认值的可变引用类型（如数组或对象）应该在函数中进行包装，以避免意外修改和外部副作用。这样可以确保每个组件实例都会获得自己默认值的副本。当使用解构时，这**不**是必要的。
+请注意，在使用 `withDefaults` 时，默认值的可变引用类型 (如数组或对象) 应该在函数中进行包装，以避免意外修改和外部副作用。这样可以确保每个组件实例都会获得自己默认值的副本。当使用解构时，这**不**是必要的。
 :::
 
 ### 非 `<script setup>` 场景下 {#without-script-setup}
@@ -371,16 +371,16 @@ const foo = inject('foo') as string
 
 ## 为模板引用标注类型 {#typing-template-refs}
 
-使用 Vue 3.5 和 `@vue/language-tools` 2.1（为 IDE 语言服务和 `vue-tsc` 提供支持），在单文件组件中，`useTemplateRef()` 创建的 ref 类型可以根据匹配的 `ref` 属性使用的元素**自动推断**为静态 ref。 
+在 Vue 3.5 和 @vue/language-tools 2.1 (为 IDE 语言服务和 vue-tsc 提供支持) 中，在 SFC 中由 `useTemplateRef()` 创建的 ref 类型可以基于匹配的 ref attribute 所在的元素**自动推断**为静态类型。
 
-在无法进行自动推断的情况下，仍然可以通过通用参数将模板 ref 转换为显式类型。
+在无法自动推断的情况下，仍然可以通过泛型参数将模板 ref 转换为显式类型。
 
 ```ts
 const el = useTemplateRef<HTMLInputElement>(null)
 ```
 
 <details>
-<summary>在 3.5 之前的版本使用</summary>
+<summary>3.5 前的用法</summary>
 
 模板引用需要通过一个显式指定的泛型参数和一个初始值 `null` 来创建：
 
@@ -408,11 +408,11 @@ onMounted(() => {
 
 ## 为组件模板引用标注类型 {#typing-component-template-refs}
 
-通过 Vue 3.5 和 `@vue/language-tools` 2.1（用于 IDE 语言服务和 `vue-tsc`）自动生成推断的 refs 类型，这将应用在基于 `ref` 属性使用的元素或组件的静态 refs 上，故在 SFC 中使用 `useTemplateRef()` 会**自动推断** ref 类型。
+在 Vue 3.5 和 @vue/language-tools 2.1 (为 IDE 语言服务和 vue-tsc 提供支持) 中，在 SFC 中由 `useTemplateRef()` 创建的 ref 类型可以基于匹配的 ref attribute 所在的元素**自动推断**为静态类型。
 
-在无法自动推断的情况下（如非 SFC 使用或动态组件），您可以通过泛型参数将模板 ref 强制转换为显式类型。
+在无法自动推断的情况下 (如非 SFC 使用或动态组件)，仍然可以通过泛型参数将模板 ref 强制转换为显式类型。
 
-为了获取导入组件的实例类型，我们需要先通过 `typeof` 获取其类型，然后使用 TypeScript 的内置 `InstanceType` 实用程序提取其实例类型：
+为了获取导入组件的实例类型，我们需要先通过 `typeof` 获取其类型，然后使用 TypeScript 的内置 `InstanceType` 工具提取其实例类型：
 
 ```vue{5}
 <!-- App.vue -->
@@ -475,4 +475,4 @@ const openModal = () => {
 </script>
 ```
 
-Note that with `@vue/language-tools` 2.1+, static template refs' types can be automatically inferred and the above is only needed in edge cases.
+请注意在 `@vue/language-tools` 2.1 以上版本中，静态模板 ref 的类型可以被自动推导，上述这些仅在极端情况下需要。