diff --git a/src/v2/style-guide/index.md b/src/v2/style-guide/index.md index a85e2f902..8499261ff 100644 --- a/src/v2/style-guide/index.md +++ b/src/v2/style-guide/index.md @@ -1490,22 +1490,22 @@ computed: { -## Priority D Rules: Use with Caution (Potentially Dangerous Patterns) +## 优先级 D 的规则:谨慎使用 (有潜在危险的模式) -### `v-if`/`v-if-else`/`v-else` without `key` use with caution +### 没有在 `v-if`/`v-if-else`/`v-else` 中使用 `key` 谨慎使用 -**It's usually best to use `key` with `v-if` + `v-else`, if they are the same element type (e.g. both `
` elements).** +**如果一组 `v-if` + `v-else` 的元素类型相同,最好使用 `key` (比如两个 `
` 元素)。** -By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have [unintended side effects](https://jsfiddle.net/chrisvfritz/bh8fLeds/) if these elements should not actually be considered the same. +默认情况下,Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时,会修补以存在的元素,而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同,则会出现[意料之外的副作用](https://jsfiddle.net/chrisvfritz/bh8fLeds/)。 {% raw %}
{% endraw %} #### 反例 ``` html
- Error: {{ error }} + 错误:{{ error }}
{{ results }} @@ -1518,7 +1518,7 @@ By default, Vue updates the DOM as efficiently as possible. That means when swit ``` html
- Error: {{ error }} + 错误:{{ error }}
{{ results }} @@ -1527,7 +1527,7 @@ By default, Vue updates the DOM as efficiently as possible. That means when swit ``` html

- Error: {{ error }} + 错误:{{ error }}

{{ results }} @@ -1537,11 +1537,11 @@ By default, Vue updates the DOM as efficiently as possible. That means when swit -### Element selectors with `scoped` use with caution +### `scoped` 中的元素选择器 谨慎使用 -**Element selectors should be avoided with `scoped`.** +**元素选择器应该避免在 `scoped` 中出现。** -Prefer class selectors over element selectors in `scoped` styles, because large numbers of element selectors are slow. +在 `scoped` 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。 {% raw %}
@@ -1550,9 +1550,9 @@ Prefer class selectors over element selectors in `scoped` styles, because large {% endraw %} -To scope styles, Vue adds a unique attribute to component elements, such as `data-v-f3f3eg9`. Then selectors are modified so that only matching elements with this attribute are selected (e.g. `button[data-v-f3f3eg9]`). +为了给样式设置作用域,Vue 会为元素添加一个独一无二的特性,例如 `data-v-f3f3eg9`。然后修改选择器,使得在匹配选择器的元素中,只有带这个特性才会真正生效 (比如 `button[data-v-f3f3eg9]`)。 -The problem is that large numbers of [element-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `button[data-v-f3f3eg9]`) will be considerably slower than [class-attribute selectors](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (e.g. `.btn-close[data-v-f3f3eg9]`), so class selectors should be preferred whenever possible. +问题在于大量的[元素和特性组合的选择器](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=a%5Bhref%5D&body=background%3A+%23CFD&ne=1000) (比如 `button[data-v-f3f3eg9]`) 会比[类和特性组合的选择器](http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class%5Bhref%5D&body=background%3A+%23CFD&ne=1000) 慢,所以应该尽可能选用类选择器。 {% raw %}
{% endraw %} @@ -1590,13 +1590,13 @@ button { -### Parent-child communication use with caution +### 父子组件通信 谨慎使用 -**Props and events should be preferred for parent-child component communication, instead of `this.$parent` or mutating props.** +**应该优先通过 prop 和事件进行父子组件之间的通信,而不是 `this.$parent` 或改变 prop。** -An ideal Vue application is props down, events up. Sticking to this convention makes your components much easier to understand. However, there are edge cases where prop mutation or `this.$parent` can simplify two components that are already deeply coupled. +一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下 prop 的变更或 `this.$parent` 能够简化两个深度耦合的组件。 -The problem is, there are also many _simple_ cases where these patterns may offer convenience. Beware: do not be seduced into trading simplicity (being able to understand the flow of your state) for short-term convenience (writing less code). +问题在于,这种做法在很多_简单_的场景下可能会更方便。但请当心,不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。 {% raw %}
{% endraw %} #### 反例 @@ -1683,11 +1683,11 @@ Vue.component('TodoItem', { -### Global state management use with caution +### 全局状态管理 谨慎使用 -**[Vuex](https://github.com/vuejs/vuex) should be preferred for global state management, instead of `this.$root` or a global event bus.** +**应该优先通过 [Vuex](https://github.com/vuejs/vuex) 管理全局状态,而不是通过 `this.$root` 或一个全局事件总线。** -Managing state on `this.$root` and/or using a [global event bus](../guide/migration.html#dispatch-和-broadcast-替换) can be convenient for very simple cases, but are not appropriate for most applications. Vuex offers not only a central place to manage state, but also tools for organizing, tracking, and debugging state changes. +通过 `this.$root` 和/或[全局事件总线](../guide/migration.html#dispatch-和-broadcast-替换)管理状态在很多简单的情况下都是很方便的,但是并不适用于绝大多数的应用。Vuex 提供的不仅是一个管理状态的中心区域,还是组织、追踪和调试状态变更的好工具。 {% raw %}{% endraw %} @@ -1770,14 +1770,14 @@ export default {