Skip to content
This repository was archived by the owner on Aug 8, 2022. It is now read-only.

Commit b4867da

Browse files
committed
docs: update bold full point
1 parent 2ef1448 commit b4867da

File tree

2 files changed

+36
-36
lines changed

2 files changed

+36
-36
lines changed

src/api/options-lifecycle-hooks.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232

3333
在挂载开始之前被调用:相关的 `render` 函数首次被调用。
3434

35-
**该钩子在服务器端渲染期间不被调用**
35+
**该钩子在服务器端渲染期间不被调用**
3636

3737
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
3838

@@ -54,7 +54,7 @@
5454
}
5555
```
5656

57-
**该钩子在服务器端渲染期间不被调用**
57+
**该钩子在服务器端渲染期间不被调用**
5858

5959
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
6060

@@ -66,7 +66,7 @@
6666

6767
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
6868

69-
**该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行**
69+
**该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行**
7070

7171
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
7272

@@ -90,7 +90,7 @@
9090
}
9191
```
9292

93-
**该钩子在服务器端渲染期间不被调用**
93+
**该钩子在服务器端渲染期间不被调用**
9494

9595
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
9696

@@ -102,7 +102,7 @@
102102

103103
被 keep-alive 缓存的组件激活时调用。
104104

105-
**该钩子在服务器端渲染期间不被调用**
105+
**该钩子在服务器端渲染期间不被调用**
106106

107107
- **参考**
108108
- [动态组件 - keep-alive](../guide/component-basics.html#keep-alive)
@@ -115,7 +115,7 @@
115115

116116
被 keep-alive 缓存的组件停用时调用。
117117

118-
**该钩子在服务器端渲染期间不被调用**
118+
**该钩子在服务器端渲染期间不被调用**
119119

120120
- **参考**
121121
- [动态组件 - keep-alive](../guide/component-basics.html#keep-alive)
@@ -128,7 +128,7 @@
128128

129129
在卸载组件实例之前调用。在这个阶段,实例仍然是完全正常的。
130130

131-
**该钩子在服务器端渲染期间不被调用**
131+
**该钩子在服务器端渲染期间不被调用**
132132

133133
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
134134

@@ -140,7 +140,7 @@
140140

141141
卸载组件实例后调用。调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
142142

143-
**该钩子在服务器端渲染期间不被调用**
143+
**该钩子在服务器端渲染期间不被调用**
144144

145145
- **参考**[生命周期图示](../guide/instance.html#lifecycle-diagram)
146146

src/style-guide/README.md

Lines changed: 28 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ sidebar: auto
3737
### 组件名为多个单词<sup data-p="a">必要</sup>
3838

3939

40-
**组件名应该始终是多个单词的,根组件 `App` 以及 `<transition>``<component>` 之类的 Vue 内置组件除外**
40+
**组件名应该始终是多个单词的,根组件 `App` 以及 `<transition>``<component>` 之类的 Vue 内置组件除外**
4141

4242
这样做可以避免跟现有的以及未来的 HTML 元素[相冲突](http://w3c.github.io/webcomponents/spec/custom/#valid-custom-element-name),因为所有的 HTML 元素名称都是单个单词的。
4343

@@ -188,7 +188,7 @@ data() {
188188

189189
### 避免 `v-if``v-for` 用在一起<sup data-p="a">必要</sup>
190190

191-
**永远不要把 `v-if``v-for` 同时用在同一个元素上**
191+
**永远不要把 `v-if``v-for` 同时用在同一个元素上**
192192

193193
一般我们在两种常见的情况下会倾向于这样做:
194194

@@ -337,11 +337,11 @@ computed: {
337337

338338
### 为组件样式设置作用域<sup data-p="a">必要</sup>
339339

340-
**对于应用来说,顶级 `App` 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的**
340+
**对于应用来说,顶级 `App` 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的**
341341

342342
这条规则只和[单文件组件](../guide/single-file-components.html)有关。你*不一定*要使用 [`scoped` attribute](https://vue-loader.vuejs.org/en/features/scoped-css.html)。设置作用域也可以通过 [CSS Modules](https://vue-loader.vuejs.org/en/features/css-modules.html),那是一个基于 class 的类似 [BEM](http://getbem.com/) 的策略,当然你也可以使用其它的库或约定。
343343

344-
**不管怎样,对于组件库,我们应该更倾向于选用基于 class 的策略而不是 `scoped` attribute**
344+
**不管怎样,对于组件库,我们应该更倾向于选用基于 class 的策略而不是 `scoped` attribute**
345345

346346
这让覆写内部样式更容易:使用了常人可理解的 class 名称且没有太高的选择器优先级,而且不太会导致冲突。
347347

@@ -428,7 +428,7 @@ computed: {
428428

429429
### 私有 property 名<sup data-p="a">必要</sup>
430430

431-
**使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点,就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 `$_` 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 `$_yourPluginName_`)**
431+
**使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点,就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 `$_` 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 `$_yourPluginName_`)**
432432

433433
::: 详细
434434

@@ -527,7 +527,7 @@ export default myGreatMixin
527527

528528
### 组件文件<sup data-p="b">强烈推荐</sup>
529529

530-
**只要有能够拼接文件的构建系统,就把每个组件单独分成文件**
530+
**只要有能够拼接文件的构建系统,就把每个组件单独分成文件**
531531

532532
当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。
533533

@@ -564,7 +564,7 @@ components/
564564
### 单文件组件文件的大小写<sup data-p="b">强烈推荐</sup>
565565

566566

567-
**[单文件组件](../guide/single-file-components.html)的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)**
567+
**[单文件组件](../guide/single-file-components.html)的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)**
568568

569569
单词大写开头对于代码编辑器的自动补全最为友好,因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。然而,混用文件命名方式有的时候会导致大小写不敏感的文件系统的问题,这也是横线连接命名同样完全可取的原因。
570570

@@ -598,7 +598,7 @@ components/
598598

599599
### 基础组件名<sup data-p="b">强烈推荐</sup>
600600

601-
**应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 `Base``App``V`**
601+
**应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 `Base``App``V`**
602602

603603
::: details 详解
604604

@@ -674,7 +674,7 @@ components/
674674

675675
### 单组件名<sup data-p="b">强烈推荐</sup>
676676

677-
**只应该拥有单个活跃实例的组件应该以 `The` 前缀命名,以示其唯一性**
677+
**只应该拥有单个活跃实例的组件应该以 `The` 前缀命名,以示其唯一性**
678678

679679
这不意味着组件只可用于一个单页面,而是*每个页面*只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是*目前*在每个页面里只使用一次。
680680

@@ -700,7 +700,7 @@ components/
700700

701701
### 紧密耦合的组件名<sup data-p="b">强烈推荐</sup>
702702

703-
**和父组件紧密耦合的子组件应该以父组件名作为前缀命名**
703+
**和父组件紧密耦合的子组件应该以父组件名作为前缀命名**
704704

705705
如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。
706706

@@ -770,7 +770,7 @@ components/
770770

771771
### 组件名中的单词顺序<sup data-p="b">强烈推荐</sup>
772772

773-
**组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾**
773+
**组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾**
774774

775775
::: details 详解
776776
你可能会疑惑:
@@ -849,7 +849,7 @@ components/
849849

850850
### 自闭合组件<sup data-p="b">强烈推荐</sup>
851851

852-
**[单文件组件](../guide/single-file-components.html)、字符串模板和 [JSX](../guide/render-function.html#JSX) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做**
852+
**[单文件组件](../guide/single-file-components.html)、字符串模板和 [JSX](../guide/render-function.html#JSX) 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做**
853853

854854
自闭合组件表示它们不仅没有内容,而且**刻意**没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签,你的代码也更简洁。
855855

@@ -885,7 +885,7 @@ components/
885885

886886
### 模板中的组件名大小写<sup data-p="b">强烈推荐</sup>
887887

888-
**对于绝大多数项目来说,在[单文件组件](../guide/single-file-components.html)和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的**
888+
**对于绝大多数项目来说,在[单文件组件](../guide/single-file-components.html)和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的**
889889

890890
PascalCase 相比 kebab-case 有一些优势:
891891

@@ -939,7 +939,7 @@ PascalCase 相比 kebab-case 有一些优势:
939939

940940
### JS/JSX 中的组件名大小写<sup data-p="b">强烈推荐</sup>
941941

942-
**JS/[JSX](../guide/render-function.html#JSX) 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 `app.component` 进行全局组件注册时,可以使用 kebab-case 字符串**
942+
**JS/[JSX](../guide/render-function.html#JSX) 中的组件名应该始终是 PascalCase 的,尽管在较为简单的应用中只使用 `app.component` 进行全局组件注册时,可以使用 kebab-case 字符串**
943943

944944
::: details 详解
945945

@@ -1009,7 +1009,7 @@ export default {
10091009

10101010
### 完整单词的组件名<sup data-p="b">强烈推荐</sup>
10111011

1012-
**组件名应该倾向于完整单词而不是缩写**
1012+
**组件名应该倾向于完整单词而不是缩写**
10131013

10141014
编辑器中的自动补全已经让书写长命名的代价非常之低了,而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
10151015

@@ -1035,7 +1035,7 @@ components/
10351035

10361036
### Prop 名大小写<sup data-p="b">强烈推荐</sup>
10371037

1038-
**在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 [JSX](../guide/render-function.html#JSX) 中应该始终使用 kebab-case**
1038+
**在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 [JSX](../guide/render-function.html#JSX) 中应该始终使用 kebab-case**
10391039

10401040
我们单纯的遵循每个语言的约定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
10411041

@@ -1069,7 +1069,7 @@ props: {
10691069

10701070
### 多个 attribute 的元素<sup data-p="b">强烈推荐</sup>
10711071

1072-
**多个 attribute 的元素应该分多行撰写,每个 attribute 一行**
1072+
**多个 attribute 的元素应该分多行撰写,每个 attribute 一行**
10731073

10741074
在 JavaScript 中,用多行分隔对象的多个 property 是很常见的最佳实践,因为这样更易读。模板和 [JSX](../guide/render-function.html#JSX) 值得我们做相同的考虑。
10751075

@@ -1106,7 +1106,7 @@ props: {
11061106

11071107
### 模板中简单的表达式<sup data-p="b">强烈推荐</sup>
11081108

1109-
**组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法**
1109+
**组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法**
11101110

11111111
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的**什么,而非如何计算那个值。而且计算属性和方法使得代码可以重用。
11121112

@@ -1144,7 +1144,7 @@ computed: {
11441144

11451145
### 简单的计算属性<sup data-p="b">强烈推荐</sup>
11461146

1147-
**应该把复杂计算属性分割为尽可能多的更简单的 property**
1147+
**应该把复杂计算属性分割为尽可能多的更简单的 property**
11481148

11491149
::: details 详解
11501150
更简单、命名得当的计算属性是这样的:
@@ -1202,7 +1202,7 @@ computed: {
12021202

12031203
### 带引号的 attribute 值<sup data-p="b">强烈推荐</sup>
12041204

1205-
**非空 HTML attribute 值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)**
1205+
**非空 HTML attribute 值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)**
12061206

12071207
在 HTML 中不带空格的 attribute 值是可以没有引号的,但这鼓励了大家在特征值里不写空格,导致可读性变差。
12081208

@@ -1232,7 +1232,7 @@ computed: {
12321232

12331233
### 指令缩写<sup data-p="b">强烈推荐</sup>
12341234

1235-
**指令缩写 (用 `:` 表示 `v-bind:``@` 表示 `v-on:` 和用 `#` 表示 `v-slot`) 应该要么都用要么都不用**
1235+
**指令缩写 (用 `:` 表示 `v-bind:``@` 表示 `v-on:` 和用 `#` 表示 `v-slot`) 应该要么都用要么都不用**
12361236

12371237
<div class="style-example style-example-bad">
12381238
<h4>反例</h4>
@@ -1319,7 +1319,7 @@ computed: {
13191319

13201320
### 组件/实例的选项的顺序<sup data-p="c">推荐</sup>
13211321

1322-
**组件/实例的选项应该有统一的顺序**
1322+
**组件/实例的选项应该有统一的顺序**
13231323

13241324
这是我们推荐的组件选项默认顺序。它们被划分为几大类,所以你也能知道从插件里添加的新 property 应该放到哪里。
13251325

@@ -1372,7 +1372,7 @@ computed: {
13721372

13731373
### 元素 attribute 的顺序<sup data-p="c">推荐</sup>
13741374

1375-
**元素 (包括组件) 的 attribute 应该有统一的顺序**
1375+
**元素 (包括组件) 的 attribute 应该有统一的顺序**
13761376

13771377
这是我们为组件选项推荐的默认顺序。它们被划分为几大类,所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。
13781378

@@ -1414,7 +1414,7 @@ computed: {
14141414

14151415
### 组件/实例选项中的空行<sup data-p="c">推荐</sup>
14161416

1417-
**你可能想在多个 property 之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候**
1417+
**你可能想在多个 property 之间增加一个空行,特别是在这些选项一屏放不下,需要滚动才能都看到的时候**
14181418

14191419
当你的组件开始觉得密集或难以阅读时,在多个 property 之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里,这样格式化后的选项还能通过键盘被快速导航。
14201420

@@ -1479,7 +1479,7 @@ computed: {
14791479

14801480
### 单文件组件的顶级元素的顺序<sup data-p="c">推荐</sup>
14811481

1482-
**[单文件组件] (../guide/single-file-components.html)应该总是让 `<script>``<template>``<style>` 标签的顺序保持一致。且 `<style>` 要放在最后,因为另外两个标签至少要有一个**
1482+
**[单文件组件] (../guide/single-file-components.html)应该总是让 `<script>``<template>``<style>` 标签的顺序保持一致。且 `<style>` 要放在最后,因为另外两个标签至少要有一个**
14831483

14841484
<div class="style-example style-example-bad">
14851485
<h4>反例</h4>
@@ -1533,7 +1533,7 @@ computed: {
15331533

15341534
### `scoped` 中的元素选择器<sup data-p="d">谨慎使用</sup>
15351535

1536-
**元素选择器应该避免在 `scoped` 中出现**
1536+
**元素选择器应该避免在 `scoped` 中出现**
15371537

15381538
`scoped` 样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的。
15391539

@@ -1579,7 +1579,7 @@ button {
15791579

15801580
### 隐性的父子组件通信<sup data-p="d">谨慎使用</sup>
15811581

1582-
**应该优先通过 prop 和事件进行父子组件之间的通信,而不是 `this.$parent` 或变更 prop**
1582+
**应该优先通过 prop 和事件进行父子组件之间的通信,而不是 `this.$parent` 或变更 prop**
15831583

15841584
一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下 prop 的变更或 `this.$parent` 能够简化两个深度耦合的组件。
15851585

@@ -1672,7 +1672,7 @@ app.component('TodoItem', {
16721672

16731673
### 非 Flux 的全局状态管理<sup data-p="d">谨慎使用</sup>
16741674

1675-
**应该优先通过 [Vuex](https://github.com/vuejs/vuex) 管理全局状态,而不是通过 `this.$root` 或一个全局事件总线**
1675+
**应该优先通过 [Vuex](https://github.com/vuejs/vuex) 管理全局状态,而不是通过 `this.$root` 或一个全局事件总线**
16761676

16771677
通过 `this.$root` 和/或[全局事件总线管理](https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced)状态在很多简单的情况下都是很方便的,但是并不适用于绝大多数的应用。
16781678

0 commit comments

Comments
 (0)