Skip to content

Commit

Permalink
review zh translation (#28)
Browse files Browse the repository at this point in the history
  • Loading branch information
wxsms committed Nov 15, 2022
1 parent cba02af commit 13e0b25
Show file tree
Hide file tree
Showing 12 changed files with 24 additions and 443 deletions.
2 changes: 1 addition & 1 deletion src/recommendations.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ Also see [Tooling chapter in new docs](https://vuejs.org/guide/scaling-up/toolin

### Vue Router

Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its [migration guide](https://router.vuejs.org/) for full details.
Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its [migration guide](https://router.vuejs.org/guide/migration/index.html) for full details.

- [Documentation](https://router.vuejs.org/)
- [GitHub](https://github.com/vuejs/router)
Expand Down
79 changes: 0 additions & 79 deletions src/zh/breaking-changes/array-refs.md

This file was deleted.

2 changes: 1 addition & 1 deletion src/zh/breaking-changes/children.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default {

## 3.x 更新

在 3.x 中,`$children` property 已被移除,且不再支持。如果你需要访问子组件实例,我们建议使用 [模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html#template-refs)
在 3.x 中,`$children` property 已被移除,且不再支持。如果你需要访问子组件实例,我们建议使用[模板引用](https://cn.vuejs.org/guide/essentials/template-refs.html#template-refs)

## 迁移策略

Expand Down
2 changes: 1 addition & 1 deletion src/zh/breaking-changes/events-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default {

在绝大多数情况下,不鼓励使用全局的事件总线在组件之间进行通信。虽然在短期内往往是最简单的解决方案,但从长期来看,它维护起来总是令人头疼。根据具体情况来看,有多种事件总线的替代方案:

* Props 和 事件 应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
* Props 和事件应该是父子组件之间沟通的首选。兄弟节点可以通过它们的父节点通信。
* `provide` / `inject` 允许一个组件与它的插槽内容进行通信。这对于总是一起使用的紧密耦合的组件非常有用。
* `provide` / `inject` 也能够用于组件之间的远距离通信。它可以帮助避免“prop 逐级透传”,即 prop 需要通过许多层级的组件传递下去,但这些组件本身可能并不需要那些 prop。
* Prop 逐级透传也可以通过重构以使用插槽来避免。如果一个中间组件不需要某些 prop,那么表明它可能存在关注点分离的问题。在该类组件中使用 slot 可以允许父节点直接为它创建内容,因此 prop 可以被直接传递而不需要中间组件的参与。
Expand Down
4 changes: 2 additions & 2 deletions src/zh/breaking-changes/global-api-treeshaking.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ Vue.nextTick(() => {
})
```

或者,如果你曾经对涉及[异步组件](https://v2.cn.vuejs.org/v2/guide/components-dynamic-async.html)的应用进行单元测试,那么你很可能编写过以下内容:
或者,如果你曾经对涉及异步组件的应用进行单元测试,那么你很可能编写过以下内容:

```js
import { shallowMount } from '@vue/test-utils'
Expand All @@ -38,7 +38,7 @@ test('an async feature', async () => {

但是,如果你从来都没有过手动操作 DOM 的必要,也没有在你的应用中使用或测试过异步组件,那该怎么办?或者,不管出于什么原因,你更喜欢使用老式的 `window.setTimeout()` 来代替它?在这种情况下,`nextTick()` 的代码就会变成死代码——也就是说,代码写了,但从未使用过。而死代码很难成为一个好的东西,尤其是在我们的客户端上下文中,每一个字节都很重要。

[webpack](https://webpack.js.org/) 这样的模块打包工具支持 [tree-shaking](https://webpack.js.org/guides/tree-shaking/),这是表达“消除死代码”的一个花哨术语。遗憾的是,由于之前的 Vue 版本中的代码编写方式,如 `Vue.nextTick()` 这样的全局 API 是不支持 tree-shake 的,不管它们实际上是否被使用了,都会被包含在最终的打包产物中。
如 webpack 和 Rollup (Vite 基于它) 这样的模块打包工具支持 [tree-shaking](https://webpack.js.org/guides/tree-shaking/),这是表达“消除死代码”的一个花哨术语。遗憾的是,由于之前的 Vue 版本中的代码编写方式,如 `Vue.nextTick()` 这样的全局 API 是不支持 tree-shake 的,不管它们实际上是否被使用了,都会被包含在最终的打包产物中。

## 3.x 语法

Expand Down
12 changes: 6 additions & 6 deletions src/zh/breaking-changes/global-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ badges:
- breaking
---

# 全局 API <MigrationBadges :badges="$frontmatter.badges" />
# 全局 API 应用实例 <MigrationBadges :badges="$frontmatter.badges" />

Vue 2.x 有许多全局 API 和配置,它们可以全局改变 Vue 的行为。例如,要注册全局组件,可以使用 `Vue.component` API,就像这样:

Expand All @@ -20,7 +20,7 @@ Vue.component('button-counter', {

```js
Vue.directive('focus', {
inserted: el => el.focus()
inserted: (el) => el.focus()
})
```

Expand Down Expand Up @@ -65,7 +65,7 @@ import { createApp } from 'vue'
const app = createApp({})
```

如果你使用的是 Vue 的 [CDN](./introduction.html#cdn) 构建版本,那么 `createApp` 将通过全局的 `Vue` 对象暴露。
如果你使用的是 Vue 的 CDN 构建版本,那么 `createApp` 将通过全局的 `Vue` 对象暴露。

```js
const { createApp } = Vue
Expand Down Expand Up @@ -107,7 +107,7 @@ Vue.config.ignoredElements = ['my-el', /^ion-/]

// 之后
const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('ion-')
```

:::tip 重要
Expand Down Expand Up @@ -234,7 +234,7 @@ app.component('button-counter', {
})

app.directive('focus', {
mounted: el => el.focus()
mounted: (el) => el.focus()
})

// 现在,所有通过 app.mount() 挂载的应用实例及其组件树,
Expand Down Expand Up @@ -275,7 +275,7 @@ import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const createMyApp = options => {
const createMyApp = (options) => {
const app = createApp(options)
app.directive('focus' /* ... */)

Expand Down
Loading

0 comments on commit 13e0b25

Please sign in to comment.