File tree Expand file tree Collapse file tree 14 files changed +43
-36
lines changed Expand file tree Collapse file tree 14 files changed +43
-36
lines changed Original file line number Diff line number Diff line change 1+ > {#
2+ ? {#
3+ ! {#
4+ <span class="options-api">
5+ <span class="composition-api">
6+ </span>
7+ ) [[源码]
Original file line number Diff line number Diff line change @@ -31,7 +31,7 @@ aside: deep
3131
3232 但也有例外的情况,某些英文单词我们倾向于选择不翻译、用原词。开发者常常与一部分英语单词打交道,许多英语单词甚至作为了开发框架或操作系统的专有名词,直接抛出这个单词也的确能够帮助用户更好的理解、锁定所讲的是什么概念。
3333
34- 3 . ** 更符合中文的表述方式** :我们必须正视英语和中文本身的差异与不同,由于表达方式和语法结构的区别,常常一个结构复杂的多重定语从句很难逐字逐词地直译成中文,翻译出的句子应符合母语者的叙述习惯,即尽可能避免英语式的倒装( 哪怕讲述方式与作者原文有较大区别) ,表述尽可能口语化。最好的方式应该是将视线从单个句子中移出来,结合上下文先进行理解再用中文的习惯性表达将其重新复述出来。
34+ 3 . ** 更符合中文的表述方式** :我们必须正视英语和中文本身的差异与不同,由于表达方式和语法结构的区别,常常一个结构复杂的多重定语从句很难逐字逐词地直译成中文,翻译出的句子应符合母语者的叙述习惯,即尽可能避免英语式的倒装( 哪怕讲述方式与作者原文有较大区别) ,表述尽可能口语化。最好的方式应该是将视线从单个句子中移出来,结合上下文先进行理解再用中文的习惯性表达将其重新复述出来。
3535
3636## 格式规范
3737
@@ -90,12 +90,12 @@ aside: deep
9090- 逗号、句号、分号、冒号、叹号、问号,统一使用全角字符:,。;:!?
9191- 破折号使用:——
9292- 引号统一使用 “ ” 和 ‘ ’
93- - 括号统一使用全角括号 ()
93+ - 括号统一使用半角括号 ()
9494- 非注释部分的代码除外,保留英文标点符号。
9595
9696#### 内联代码或代码关键字
9797
98- - 务必用反引号( 即英文输入法下,按键盘上 Tab 键上方的那个键) 将内容括起来。
98+ - 务必用反引号( 即英文输入法下,按键盘上 Tab 键上方的那个键) 将内容括起来。
9999- 包括代码注释中出现代码或代码关键字时,也要括起来。
100100
101101#### 空格的使用
@@ -256,7 +256,7 @@ Vitepress 和 Vuepress 中对以上两种写法的渲染视觉效果为:
256256
257257在 Markdown 文档中 ` [title](link) ` 形式的链接非常常用,而 Vue 文档中大量使用了这一语法,用来作章节的跳转。
258258
259- 链接中有时还会带有锚点( 以 ` # ` 作前缀) 用来定位到页面的对应位置,例如 ` [props 大小写格式](/guide/components/props.html#prop-name-casing) ` 。
259+ 链接中有时还会带有锚点( 以 ` # ` 作前缀) 用来定位到页面的对应位置,例如 ` [props 大小写格式](/guide/components/props.html#prop-name-casing) ` 。
260260
261261但是在 VitePress 中,由于锚点是对应 Markdown 内容中的 “标题行” 的,因此若改动了英文内容的标题行,别处引用此处的锚点就是失效了:
262262
Original file line number Diff line number Diff line change 155155 /* ... */
156156 })
157157
158- // 注册( 对象形式的指令)
158+ // 注册( 对象形式的指令)
159159 app.directive('myDirective', {
160160 /* 自定义指令钩子 */
161161 })
162162
163- // 注册( 函数形式的指令)
163+ // 注册( 函数形式的指令)
164164 app.directive('myDirective', () => {
165165 /* ... */
166166 })
Original file line number Diff line number Diff line change @@ -86,16 +86,16 @@ export default {
8686``` js
8787export default {
8888 setup (props , context ) {
89- // 透传 Attributes( 非响应式的对象,等价于 $attrs)
89+ // 透传 Attributes ( 非响应式的对象,等价于 $attrs)
9090 console .log (context .attrs )
9191
92- // 插槽( 非响应式的对象,等价于 $slots)
92+ // 插槽( 非响应式的对象,等价于 $slots)
9393 console .log (context .slots )
9494
95- // 触发事件( 函数,等价于 $emit)
95+ // 触发事件( 函数,等价于 $emit)
9696 console .log (context .emit )
9797
98- // 暴露公共属性(函数)
98+ // 暴露公共属性(函数)
9999 console .log (context .expose )
100100 }
101101}
Original file line number Diff line number Diff line change 217217
218218 ** 错误捕获注意事项**
219219
220- - 在使用异步 ` setup() ` 函数( 使用了顶层 ` await ` ) 的组件中,即使 ` setup() ` 抛出了错误,Vue 也会尝试渲染组件模板。这可能会导致更多错误,因为在渲染组件模板时,可能会尝试访问失败的 ` setup() ` 上下文中不存在的属性。当捕获这类组件的错误时,应当同时准备好捕获异步 ` setup() ` ( 永远会先抛出错误) 和失败的渲染过程中的错误。
220+ - 在使用异步 ` setup() ` 函数( 使用了顶层 ` await ` ) 的组件中,即使 ` setup() ` 抛出了错误,Vue 也会尝试渲染组件模板。这可能会导致更多错误,因为在渲染组件模板时,可能会尝试访问失败的 ` setup() ` 上下文中不存在的属性。当捕获这类组件的错误时,应当同时准备好捕获异步 ` setup() ` ( 永远会先抛出错误) 和失败的渲染过程中的错误。
221221
222222 - <sup class =" vt-badge " data-text =" SSR only " ></sup > 在 ` <Suspense> ` 的父组件中替换出错的子组件会导致 SSR 的激活不匹配。相反,尽量将可能抛出错误的逻辑从子组件的 ` setup() ` 中抽成一个独立的函数并在父组件的 ` setup() ` 中执行,这样就可以安全地 ` try/catch ` 执行过程,并在渲染实际的子组件前根据需要进行替换。
223223
Original file line number Diff line number Diff line change @@ -84,7 +84,7 @@ import { defineAsyncComponent } from 'vue'
8484
8585// 会为 Foo.vue 及其依赖创建单独的一个块
8686// 它只会按需加载
87- // ( 即该异步组件在页面中被渲染时)
87+ // ( 即该异步组件在页面中被渲染时)
8888const Foo = defineAsyncComponent (() => import (' ./Foo.vue' ))
8989```
9090
Original file line number Diff line number Diff line change 1313
1414## 不使用构建工具 {#without-build-tools}
1515
16- 如果你没有使用任何构建工具,而是从 CDN 或其他源来加载 Vue,请确保在部署时使用的是生产环境版本( 以 ` .prod.js ` 结尾的构建文件) 。生产环境版本会被最小化,并移除了所有仅用于开发环境的代码分支。
16+ 如果你没有使用任何构建工具,而是从 CDN 或其他源来加载 Vue,请确保在部署时使用的是生产环境版本( 以 ` .prod.js ` 结尾的构建文件) 。生产环境版本会被最小化,并移除了所有仅用于开发环境的代码分支。
1717
18- - 如果需要使用全局变量版本( 通过 ` Vue ` 全局变量访问) :请使用 ` vue.global.prod.js ` 。
19- - 如果需要 ESM 版本( 通过原生 ESM 导入访问) :请使用 ` vue.esm-browser.prod.js ` 。
18+ - 如果需要使用全局变量版本( 通过 ` Vue ` 全局变量访问) :请使用 ` vue.global.prod.js ` 。
19+ - 如果需要 ESM 版本( 通过原生 ESM 导入访问) :请使用 ` vue.esm-browser.prod.js ` 。
2020
2121更多细节请参考[ 构建文件指南] ( https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use ) 。
2222
2323## 使用构建工具 {#with-build-tools}
2424
25- 通过 ` create-vue ` ( 基于 Vite) 或是 Vue CLI( 基于 webpack) 搭建的项目都已经预先做好了针对生产环境的配置。
25+ 通过 ` create-vue ` ( 基于 Vite) 或是 Vue CLI ( 基于 webpack) 搭建的项目都已经预先做好了针对生产环境的配置。
2626
2727如果使用了自定义的构建,请确保:
2828
Original file line number Diff line number Diff line change @@ -18,10 +18,10 @@ outline: deep
1818<Suspense>
1919└─ <Dashboard>
2020 ├─ <Profile>
21- │ └─ <FriendStatus>( 组件有异步的 setup())
21+ │ └─ <FriendStatus> ( 组件有异步的 setup())
2222 └─ <Content>
23- ├─ <ActivityFeed> ( 异步组件)
24- └─ <Stats>( 异步组件)
23+ ├─ <ActivityFeed> ( 异步组件)
24+ └─ <Stats> ( 异步组件)
2525```
2626
2727在这个组件树中有多个嵌套组件,要渲染出它们,首先得解析一些异步资源。如果没有 ` <Suspense> ` ,则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下,我们可能会在页面上看到三个旋转的加载态,在不同的时间显示出内容。
Original file line number Diff line number Diff line change @@ -445,7 +445,7 @@ Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我
445445``` js
446446defineProps ({
447447 // 基础类型检查
448- // ( 给出 `null` 和 `undefined` 值则会跳过任何类型检查)
448+ // ( 给出 `null` 和 `undefined` 值则会跳过任何类型检查)
449449 propA: Number ,
450450 // 多种可能的类型
451451 propB: [String , Number ],
@@ -505,7 +505,7 @@ defineProps({
505505export default {
506506 props: {
507507 // 基础类型检查
508- // ( 给出 `null` 和 `undefined` 值则会跳过任何类型检查)
508+ // ( 给出 `null` 和 `undefined` 值则会跳过任何类型检查)
509509 propA: Number ,
510510 // 多种可能的类型
511511 propB: [String , Number ],
Original file line number Diff line number Diff line change @@ -104,7 +104,7 @@ watchEffect(() => {
104104 if (input .value ) {
105105 input .value .focus ()
106106 } else {
107- // 此时还未挂载,或此元素已经被卸载( 例如通过 v-if 控制)
107+ // 此时还未挂载,或此元素已经被卸载( 例如通过 v-if 控制)
108108 }
109109})
110110```
You can’t perform that action at this time.
0 commit comments