diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 259b2f267..185f7e6ff 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -10,10 +10,10 @@ const nav = [ text: '文档', activeMatch: `^/(guide|style-guide|cookbook|examples)/`, items: [ - { text: '指南', link: '/guide/introduction' }, - { text: '教程', link: '/tutorial/' }, + { text: '深度指南', link: '/guide/introduction' }, + { text: '互动教程', link: '/tutorial/' }, { text: '示例', link: '/examples/' }, - { text: '快速开始', link: '/guide/quick-start' }, + { text: '快速上手', link: '/guide/quick-start' }, // { text: '风格指南', link: '/style-guide/' }, { text: 'Vue 2 文档', @@ -43,7 +43,7 @@ const nav = [ items: [ { text: '合作伙伴', link: '/partners/' }, { text: '主题', link: '/ecosystem/themes' }, - { text: '工作', link: 'https://vuejobs.com/?ref=vuejs' }, + { text: '找工作', link: 'https://vuejobs.com/?ref=vuejs' }, { text: 'T-Shirt 商店', link: 'https://vue.threadless.com/' } ] }, @@ -111,7 +111,7 @@ const nav = [ ] }, { - text: '赞助者', + text: '赞助', link: '/sponsor/' }, { @@ -171,7 +171,7 @@ export const sidebar = { link: '/guide/essentials/lifecycle' }, { text: '侦听器', link: '/guide/essentials/watchers' }, - { text: '模板 ref', link: '/guide/essentials/template-refs' }, + { text: '模板引用', link: '/guide/essentials/template-refs' }, { text: '组件基础', link: '/guide/essentials/component-basics' @@ -185,10 +185,10 @@ export const sidebar = { text: '注册', link: '/guide/components/registration' }, - { text: 'Prop', link: '/guide/components/props' }, + { text: 'Props', link: '/guide/components/props' }, { text: '事件', link: '/guide/components/events' }, { - text: '透传 Attribute', + text: '透传 Attributes', link: '/guide/components/attrs' }, { text: '插槽', link: '/guide/components/slots' }, @@ -230,7 +230,7 @@ export const sidebar = { ] }, { - text: '升级规模', + text: '应用规模化', items: [ { text: '单文件组件', link: '/guide/scaling-up/sfc' }, { text: '工具链', link: '/guide/scaling-up/tooling' }, @@ -254,7 +254,7 @@ export const sidebar = { link: '/guide/best-practices/production-deployment' }, { - text: '性能', + text: '性能优化', link: '/guide/best-practices/performance' }, { @@ -289,7 +289,7 @@ export const sidebar = { link: '/guide/extras/ways-of-using-vue' }, { - text: '组合式 API FAQ', + text: '组合式 API 常见问答', link: '/guide/extras/composition-api-faq' }, { diff --git a/.vitepress/theme/components/Home.vue b/.vitepress/theme/components/Home.vue index 499e91fde..ecad00f37 100644 --- a/.vitepress/theme/components/Home.vue +++ b/.vitepress/theme/components/Home.vue @@ -19,7 +19,7 @@ onMounted(async () => {
JavaScript 框架

- 一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架。 + 易学易用,性能出色,适用场景丰富的 Web 前端框架。

@@ -62,7 +62,7 @@ onMounted(async () => {

易学易用

- 基于标准 HTML、CSS 和 JavaScript 构建,拥有直观的 API 和世界一流的文档。 + 基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。

@@ -72,9 +72,9 @@ onMounted(async () => {

-

功能丰富

+

灵活多变

- 拥有丰富的、可渐进式集成的生态系统,可以根据规模在仅使用一个库和使用整套框架间切换自如。 + 丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如。

diff --git a/src/about/faq.md b/src/about/faq.md index c967e6ec5..e2903f14a 100644 --- a/src/about/faq.md +++ b/src/about/faq.md @@ -2,7 +2,7 @@ ## 谁在维护 Vue? {#who-maintains-vue} -Vue 是一个独立的社区驱动的项目。它是由[尤雨溪](https://twitter.com/yuxiyou)在 2014 年作为其个人项目创建的。今天,Vue 由[来自世界各地的全职成员和志愿者组成的团队](/about/team)积极活跃地维护着,且尤雨溪担任其项目负责人。你可以在[这部纪录片](https://www.youtube.com/watch?v=OrxmtDw4pVI)中了解更多关于 Vue 的故事。 +Vue 是一个独立的社区驱动的项目。它是由[尤雨溪](https://twitter.com/yuxiyou)在 2014 年作为其个人项目创建的。今天,Vue 由[来自世界各地的全职成员和志愿者组成的团队](/about/team)积极活跃地维护着,并由尤雨溪担任项目负责人。你可以在[这部纪录片](https://www.youtube.com/watch?v=OrxmtDw4pVI)中了解更多关于 Vue 的故事。 自 2016 年以来,Vue 的发展主要是通过赞助来保障的,我们在财务上是可维续的。如果你或你的企业从 Vue 中受益,请考虑[赞助](/sponsor/)我们,以支持 Vue 的发展! @@ -16,17 +16,17 @@ Vue 是完全免费的开源项目,且基于 [MIT License](https://opensource. ## Vue 可靠吗? {#is-vue-reliable} -Vue 是一个成熟的、经历了无数实战考验的框架。它是目前生产环境中使用最广泛的 JavaScript 框架之一,在全球拥有超过 150 万用户,并且在 npm 上的月下载量接近 1000 万次。 +Vue 是一个成熟的、经历了无数实战考验的框架。它是目前生产环境中使用最广泛的 JavaScript 框架之一,在全球拥有超过 150 万用户,并且在 npm 上的月下载量超过 1000 万次。 Vue 被世界各地知名且多元的组织在生产环境中使用,包括 Wikimedia 基金会、美国宇航局、苹果、谷歌、微软、GitLab、Zoom、腾讯、微博、哔哩哔哩、快手等等。 ## Vue 速度快吗? {#is-vue-fast} -Vue 3 是性能最强的主流前端框架之一,可以轻松处理大多数 web 应用的场景,不需要手动优化。 +Vue 3 是性能最强的主流前端框架之一,可以轻松处理大多数 web 应用的场景,并且几乎不需要手动优化。 -关于压力测试,Vue 在 [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) 中的表现比 React 和 Angular 等框架要好得多。在该基准测试中,它还与一些生产环境下最快级别的非虚拟 DOM 框架并驾齐驱。 +跑分方面,Vue 在 [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html) 中的表现比 React 和 Angular 要好得多。在该基准测试中,它还与一些生产环境下最快级别的非虚拟 DOM 框架并驾齐驱。 -请注意,像上面这样的合成基准测试的侧重点在于原始渲染性能的专属优化,可能不能完全代表真实世界的性能结果。如果你更关心页面加载性能,欢迎使用 [WebPageTest](https://www.webpagetest.org/lighthouse) 或 [PageSpeed Insights](https://pagespeed.web.dev/) 来审核本网站。本网站由 Vue 驱动,具有静态站点生成器的预渲染、全页面激活和单页应用客户端导航功能。它在模拟较慢的 4G 网络和 4 倍 CPU 节流的 Moto G4 上的性能得分为 100 分。 +请注意,像上面这样的跑分的侧重点在于原始渲染性能在特定情况下的优化,因此不能完全代表真实世界的性能结果。如果你更关心页面加载性能,欢迎用 [WebPageTest](https://www.webpagetest.org/lighthouse) 或是 [PageSpeed Insights](https://pagespeed.web.dev/) 来测试本站。本文档站是一个完全由 Vue 本身构建,通过静态生成预渲染,并在客户端进行 hydration 的单页应用。它在模拟 4 倍 CPU 降速的 Moto G4 + 低速 4G 网络的情况下依然能获得 100 分的性能得分。 你可以在[渲染机制](/guide/extras/rendering-mechanism.html)章节了解更多关于 Vue 如何自动优化运行时性能的信息,也可以在[性能优化指南](/guide/best-practices/performance.html)中了解如何在特别苛刻的情况下优化 Vue 应用。 @@ -40,25 +40,25 @@ Vue 3 是性能最强的主流前端框架之一,可以轻松处理大多数 w 一些诸如 Svelte 的框架使用了一种为单个组件产生极轻量级输出的编译策略。然而,[我们的研究](https://github.com/yyx990803/vue-svelte-size-analysis)表明,包大小的差异在很大程度上取决于应用程序中的组件数量。虽然 Vue 的基线大小更重,但它生成的每个组件的代码更少。在现实的场景中,Vue 应用很可能最终会更轻。 -## Vue 的规模扩展性如何? {#does-vue-scale} +## Vue 能胜任大规模场景吗? {#does-vue-scale} -是的。尽管人们普遍认为 Vue 只适用于简单的用例,但 Vue 完全有能力处理大规模的应用: +是的。尽管有一种误解是 Vue 只适用于简单的场景,但其实 Vue 完全有能力处理大规模的应用: -- [单文件组件](/guide/scaling-up/sfc)提供了一个模块化的开发模型,允许应用程序的不同部分被隔离开发。 +- [单文件组件](/guide/scaling-up/sfc)提供了一个模块化的开发模型,让应用程序的不同部分能够被隔离开发。 - [组合式 API](/guide/reusability/composables) 提供一流的 TypeScript 集成,并为组织、提取和重用复杂逻辑提供了简洁的模式。 - [全面的工具链支持](/guide/scaling-up/tooling.html)使得开发体验在应用增长的过程中依然可以保持平滑。 -- 我们通过较低的入门门槛和优秀的文档降低了新手开发者的入职和培训成本。 +- 较低的入门门槛和优秀的文档能够显著降低新手开发者的入职和培训成本。 ## 我可以为 Vue 做贡献吗? {#how-do-i-contribute-to-vue} -我们非常感激你的兴趣!请阅读我们的[社区指南](/about/community-guide.html)。 +非常欢迎!请阅读我们的[社区指南](/about/community-guide.html)。 ## Vue 2 和 Vue 3 之间的区别是什么? {#what-s-the-difference-between-vue-2-and-vue-3} -Vue 3 是 Vue 当前的最新主版本。它包含了 Vue 2 中没有的新特性 (比如最明显的组合式 API),同时也包含了一些与 Vue 2 非兼容性的变更。尽管存在差异,但大多数 Vue API 在两个大版本之间是共享的,所以你的大部分 Vue 2 知识将继续在 Vue 3 中发挥作用。 +Vue 3 是 Vue 当前的最新主版本。它包含了一些 Vue 2 中没有的新特性 (比如 Fragment 和 Teleport),同时也包含了一些与 Vue 2 非兼容性的变更。尽管存在差异,但大多数 Vue API 在两个大版本之间是共享的,尤其是在 Vue 2.7 引入组合式 API 之后,两个版本的差异变得更小,所以你的大部分 Vue 2 知识将继续在 Vue 3 中发挥作用。 总的来说,Vue 3 提供了更小的包体积、更好的性能、更好的可扩展性和更好的 TypeScript/IDE 支持。如果你现在要开始一个新项目,我们推荐你选择 Vue 3。但也仍然存在一些考虑使用 Vue 2 的理由: @@ -68,19 +68,19 @@ Vue 3 是 Vue 当前的最新主版本。它包含了 Vue 2 中没有的新特 如果你打算将现有的 Vue 2 应用迁移到 Vue 3,请查阅我们特别整理的 [Vue 3 迁移指南](https://v3-migration.vuejs.org/)。 -Vue 2 已经在 2022 年 7 月发布了最后一个小版本 (2.7)。这个小版本包含了一组从 Vue 3 中移植回来的新特性子集。Vue 2 现在已经进入维护模式:它将不再提供新特性,但将继续针对重大错误修复和安全更新进行发布,直到 2023 年底。 +Vue 2 在 2022 年 6 月发布了最后一个小版本 (2.7)。这个小版本将一些 Vue 3 的新特性,如组合式 API 移植回了 Vue 2。目前 Vue 2 已经进入维护模式:它将不再提供新特性,但将继续针对重大错误修复和安全更新进行发布,为期 18 个月,到 2023 年年底为止。2023 年年底,Vue 2 将正式停止维护进入 End of Life。如果您的团队预期届时仍然需要维护基于 Vue 2 的项目,我们建议您在[这里](https://airtable.com/shrj37Zf4ZIfrxFzh)注册——我们可能会考虑到时提供付费的延长支持服务。 ## 我应该使用选项式 API 还是组合式 API? {#should-i-use-options-api-or-composition-api} 如果你是 Vue 的新手,我们在[这里](/guide/introduction.html#which-to-choose)提供了一个两者之间宏观的比较。 -如果你过去使用过选项式 API 且正在评估组合式 API,可以查阅[常见问题](/guide/extras/composition-api-faq)。 +如果你过去使用过选项式 API 且正在评估组合式 API,可以查阅[组合式 API 常见问题](/guide/extras/composition-api-faq)。 -## 我应该结合 JavaScript 还是 TypeScript 使用 Vue? {#should-i-use-javascript-or-typescript-with-vue} +## 用 Vue 的时候应该选 JS 还是 TS? {#should-i-use-javascript-or-typescript-with-vue} 虽然 Vue 本身是用 TypeScript 实现的,并提供一流的 TypeScript 支持,但它并不强制要求用户使用 TypeScript。 -在向 Vue 添加新特性时,对 TypeScript 对支持是一个重要的考虑因素。基于 TypeScript 考量的 API 设计通常更容易被 IDE 和 lint 工具理解,即使你自己不使用 TypeScript。这是一种双赢。Vue 的 API 设计也尽可能在 JavaScript 和 TypeScript 中以相同的方式工作。 +在向 Vue 添加新特性时,对 TypeScript 对支持是一个重要的考虑因素。即使你自己不使用 TypeScript,考虑了 TypeScript 支持的 API 设计也通常更容易被 IDE 和静态分析工具分析,因此这对大家都有好处。Vue 的 API 设计也尽可能在 JavaScript 和 TypeScript 中以相同的方式工作。 选用 TypeScript 会涉及在上手复杂性和长期可维护性收益之间作出权衡。这种权衡是否合理取决于你的团队背景和项目规模,但 Vue 并不会真正成为影响这一决定的因素。 @@ -90,7 +90,7 @@ Vue 是在 Web Components 出现之前被创建的,Vue 在某些方面的设 Web Components 规范相对底层一些,因为它们是以自定义元素为中心的。作为一个框架,Vue 解决了更多上层的问题,如高效的 DOM 渲染、响应式状态管理、工具链、客户端路由和服务器端渲染等。 -Vue 还完全支持消费或导出到原生自定义元素——查看 [Vue 和 Web Components 指南](/guide/extras/web-components)以了解更多细节。 +Vue 完全支持在 Vue 组件中使用原生自定义元素,也支持将 Vue 组件导出为原生自定义元素——请参阅 [Vue 和 Web Components 指南](/guide/extras/web-components)以了解更多细节。 diff --git a/src/about/releases.md b/src/about/releases.md index a969cba57..a2b879d1e 100644 --- a/src/about/releases.md +++ b/src/about/releases.md @@ -28,19 +28,19 @@ onMounted(async () => { Vue 并没有固定的发布周期。 -- 补丁版本发布会及时按需进行。 +- 补丁版本 (patch releases) 发布会及时按需进行。 -- 小版本发布总是会包含一些新特性,发布周期通常会在 3~6 个月之间,并会经历 beta 预发布阶段。 +- 小版本 (minor releases) 发布总是会包含一些新特性,发布周期通常会在 3~6 个月之间,并会经历 beta 预发布阶段。 -- 大版本发布会提前知会,且经历早期讨论和 alpha、beta 等预发布阶段。 +- 大版本 (major releases) 发布会提前知会,且经历早期讨论和 alpha、beta 等预发布阶段。 ## 语义化版本控制的特殊情况 {#semantic-versioning-edge-cases} Vue 的发布会遵循[语义化版本控制](https://semver.org/),同时伴随一些特殊情况。 -### TypeScript 定义 {#typescript-definitions} +### TypeScript 类型声明 {#typescript-definitions} -我们可能会在**小版本**发布之间包含 TypeScript 定义的不兼容变更,因为: +我们可能会在**小版本**发布之间包含 TypeScript 类型声明的不兼容变更,因为: 1. 有的时候 TypeScript 自身会在其小版本之间发布不兼容变更,我们不得不为了支持更新版本的 TypeScript 而调整自身的类型定义。 @@ -58,7 +58,7 @@ Vue 的发布会遵循[语义化版本控制](https://semver.org/),同时伴 小版本发布通常会经历不定量的 beta 版。而大版本发布则会经历 alpha 和 beta 阶段。 -预发布版本是为了进行集成/稳定性测试,并让早期用户为不稳定的功能提供反馈。请不要在生产中使用预发布版本。所有的预发布版本都被认为是不稳定的,并且可能会在两者之间产生不兼容变更,所以在使用预发布版本时,一定要精确锁定版本号。 +预发布版本 (pre releases) 是为了进行集成/稳定性测试,并让早期用户为不稳定的功能提供反馈。请不要在生产中使用预发布版本。所有的预发布版本都被认为是不稳定的,并且可能会在两者之间产生不兼容变更,所以在使用预发布版本时,一定要精确锁定版本号。 ## 废弃的特性 {#deprecations} diff --git a/src/api/application.md b/src/api/application.md index 9a7d709fd..9dbf24583 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -491,7 +491,7 @@ console.log(app.config) ## app.config.globalProperties {#app-config-globalproperties} -一个用于注册能够被应用内所有组件实例访问到的全局 property 的对象。 +一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。 - **类型** diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index 1cb36a22b..ba223b243 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -152,7 +152,7 @@ h(Transition, { 注意,每个 `` 的子节点必须有[**独立的 key**](/guide/essentials/list.html#maintaining-state-with-key),动画才能正常工作。 - `` 支持通过 CSS transform 过渡移动。当一个子节点在屏幕上的位置在更新之后发生变化时,它会被应用一个使其移动的 CSS class (通过 `name` attribute 自动生成或使用 `move-class` prop 配置)。如果使其移动的 class 被应用时 CSS `transform` property 是“可过渡的”,该元素会通过 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。 + `` 支持通过 CSS transform 过渡移动。当一个子节点在屏幕上的位置在更新之后发生变化时,它会被应用一个使其移动的 CSS class (通过 `name` attribute 自动生成或使用 `move-class` prop 配置)。如果使其移动的 class 被应用时 CSS `transform` 属性是“可过渡的”,该元素会通过 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。 - **示例** diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md index 0596dc7b8..c9d54e89a 100644 --- a/src/api/built-in-directives.md +++ b/src/api/built-in-directives.md @@ -8,7 +8,7 @@ - **详细信息** - `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) property 来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分,应该使用 [mustache interpolations](/guide/essentials/template-syntax.html#text-interpolation) 代替。 + `v-text` 通过设置元素的 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 属性来工作,因此它将覆盖元素中所有现有的内容。如果你需要更新 `textContent` 的部分,应该使用 [mustache interpolations](/guide/essentials/template-syntax.html#text-interpolation) 代替。 - **示例** @@ -52,7 +52,7 @@ - **详细信息** - `v-show` 通过设置内联样式的 `display` CSS property 来工作,当元素可见时将使用初始 `display` 值。当条件改变时,也会触发过度效果。 + `v-show` 通过设置内联样式的 `display` CSS 属性来工作,当元素可见时将使用初始 `display` 值。当条件改变时,也会触发过度效果。 - **参考**:[条件渲染 - v-show](/guide/essentials/conditional.html#v-show) @@ -196,7 +196,7 @@ 当用于普通元素,只监听[**原生 DOM 事件**](https://developer.mozilla.org/en-US/docs/Web/Events)。当用于自定义元素组件,则监听子组件触发的**自定义事件**。 - 当监听原生 DOM 事件时,方法接收原生事件作为唯一参数。如果使用内联声明,声明可以访问一个特殊的 `$event` property:`v-on:click="handle('ok', $event)"`。 + 当监听原生 DOM 事件时,方法接收原生事件作为唯一参数。如果使用内联声明,声明可以访问一个特殊的 `$event` 变量:`v-on:click="handle('ok', $event)"`。 `v-on` 还支持绑定不带参数的事件/监听器对的对象。请注意,当使用对象语法时,不支持任何修饰符。 @@ -323,7 +323,7 @@ ```vue-html
- +
``` @@ -450,7 +450,7 @@

{{msg}}

- +