Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

review zh translation #28

Merged
merged 6 commits into from
Nov 15, 2022
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.
Jinjiang marked this conversation as resolved.
Show resolved Hide resolved

- [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 已被移除,且不再支持。如果你需要访问子组件实例,我们建议使用 [$refs](https://cn.vuejs.org/guide/essentials/template-refs.html#template-refs)。
wxsms marked this conversation as resolved.
Show resolved Hide resolved

## 迁移策略

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