Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: 时瑶 <[email protected]>
  • Loading branch information
Justineo and KiritaniAyaka authored Sep 10, 2024
1 parent 308ee4d commit a9a703a
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 13 deletions.
4 changes: 2 additions & 2 deletions src/guide/extras/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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, {
Expand Down
4 changes: 2 additions & 2 deletions src/guide/scaling-up/ssr.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

Expand Down
18 changes: 9 additions & 9 deletions src/guide/typescript/composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -96,7 +96,7 @@ const props = withDefaults(defineProps<Props>(), {
这将被编译为等效的运行时 props `default` 选项。此外,`withDefaults` 帮助程序为默认值提供类型检查,并确保返回的 props 类型删除了已声明默认值的属性的可选标志。

:::info
请注意,在使用 `withDefaults` 时,默认值的可变引用类型如数组或对象应该在函数中进行包装,以避免意外修改和外部副作用。这样可以确保每个组件实例都会获得自己默认值的副本。当使用解构时,这****是必要的。
请注意,在使用 `withDefaults` 时,默认值的可变引用类型 (如数组或对象) 应该在函数中进行包装,以避免意外修改和外部副作用。这样可以确保每个组件实例都会获得自己默认值的副本。当使用解构时,这****是必要的。
:::

### `<script setup>` 场景下 {#without-script-setup}
Expand Down Expand Up @@ -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` 来创建:

Expand Down Expand Up @@ -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 -->
Expand Down Expand Up @@ -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 的类型可以被自动推导,上述这些仅在极端情况下需要。

0 comments on commit a9a703a

Please sign in to comment.