Skip to content

Final Review (Guide) #487

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

Merged
merged 53 commits into from
Aug 5, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
53 commits
Select commit Hold shift + click to select a range
5d0e263
review: home & intro
yyx990803 Jun 28, 2022
d8e4450
review: application, template syntax
yyx990803 Jun 29, 2022
06d6f81
property -> 属性
yyx990803 Jun 29, 2022
721e72d
review: reactivity
yyx990803 Jun 29, 2022
859b9fe
review: faq
yyx990803 Jun 29, 2022
5b77463
review: computed
yyx990803 Jun 29, 2022
07361db
review: class and style
yyx990803 Jun 29, 2022
2b4d157
review: conditional rendering
yyx990803 Jun 29, 2022
08e83ce
review: list rendering
yyx990803 Jun 29, 2022
fa43854
review: event handling
yyx990803 Jun 29, 2022
16caf85
reivew: form bindings
yyx990803 Jun 29, 2022
c491225
review: lifecycle
yyx990803 Jun 29, 2022
b8fe5b4
review: watchers
yyx990803 Jun 29, 2022
d897a7b
review: template refs
yyx990803 Jun 29, 2022
e733094
review: component basics
yyx990803 Jun 29, 2022
5ef3275
review: component registration
yyx990803 Aug 1, 2022
ca7513a
review: component props
yyx990803 Aug 1, 2022
739e607
review: component events
yyx990803 Aug 1, 2022
c30e5c2
review: fallthrough attributes
yyx990803 Aug 1, 2022
bc0a4fd
举个例子 -> 举例来说
yyx990803 Aug 1, 2022
36832db
review: component slots
yyx990803 Aug 1, 2022
331457c
review: provide/inject
yyx990803 Aug 1, 2022
f08ff8c
review: async components
yyx990803 Aug 1, 2022
36dda18
review: menu text
yyx990803 Aug 1, 2022
f753143
review: composables
yyx990803 Aug 2, 2022
060ee7f
review: custom directives
yyx990803 Aug 2, 2022
3f91928
review: plugins
yyx990803 Aug 2, 2022
a9cfd4a
undo translation of code sample
yyx990803 Aug 2, 2022
2f7063c
review: built-in components
yyx990803 Aug 2, 2022
52bd41e
review: sfc
yyx990803 Aug 3, 2022
3d7e666
review: tooling
yyx990803 Aug 3, 2022
91c0a48
review: routing
yyx990803 Aug 3, 2022
5302701
review: state management
yyx990803 Aug 3, 2022
797cfec
review: testing
yyx990803 Aug 3, 2022
cfcf7bd
review: ssr
yyx990803 Aug 3, 2022
20889c4
review: production deployment
yyx990803 Aug 3, 2022
9341516
review: performance
yyx990803 Aug 3, 2022
7a1ad0e
review: security
yyx990803 Aug 3, 2022
fd68acf
review: typescript
yyx990803 Aug 3, 2022
16db58e
review: ways of using vue
yyx990803 Aug 4, 2022
9b60cec
review: add english equivalents to important concepts
yyx990803 Aug 4, 2022
f5a80d8
expand ssr hydration mismatch section
yyx990803 Aug 5, 2022
8cf839f
review: composition api faq
yyx990803 Aug 5, 2022
8da7fec
review: reactivity in depth
yyx990803 Aug 5, 2022
7d5fd40
review: rendering mechanism
yyx990803 Aug 5, 2022
59ea13d
review: render function
yyx990803 Aug 5, 2022
22c2901
review: web components
yyx990803 Aug 5, 2022
09caf5f
review: animation
yyx990803 Aug 5, 2022
f474578
review: reactivity transform
yyx990803 Aug 5, 2022
0eb78a2
resolve conflict
yyx990803 Aug 5, 2022
1f255f9
small tweak
yyx990803 Aug 5, 2022
1659984
review: faq
yyx990803 Aug 5, 2022
669ce14
review: releases
yyx990803 Aug 5, 2022
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
22 changes: 11 additions & 11 deletions .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 文档',
Expand Down Expand Up @@ -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/' }
]
},
Expand Down Expand Up @@ -111,7 +111,7 @@ const nav = [
]
},
{
text: '赞助者',
text: '赞助',
link: '/sponsor/'
},
{
Expand Down Expand Up @@ -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'
Expand All @@ -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' },
Expand Down Expand Up @@ -230,7 +230,7 @@ export const sidebar = {
]
},
{
text: '升级规模',
text: '应用规模化',
items: [
{ text: '单文件组件', link: '/guide/scaling-up/sfc' },
{ text: '工具链', link: '/guide/scaling-up/tooling' },
Expand All @@ -254,7 +254,7 @@ export const sidebar = {
link: '/guide/best-practices/production-deployment'
},
{
text: '性能',
text: '性能优化',
link: '/guide/best-practices/performance'
},
{
Expand Down Expand Up @@ -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'
},
{
Expand Down
8 changes: 4 additions & 4 deletions .vitepress/theme/components/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ onMounted(async () => {
<br />JavaScript 框架
</h1>
<p class="description">
一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架
易学易用,性能出色,适用场景丰富的 Web 前端框架
</p>
<p class="actions">
<!-- NOTE: hide the home video -->
Expand Down Expand Up @@ -62,7 +62,7 @@ onMounted(async () => {
<div class="vt-box">
<h2>易学易用</h2>
<p>
基于标准 HTML、CSS 和 JavaScript 构建,拥有直观的 API 和世界一流的文档
基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档
</p>
</div>
<div class="vt-box">
Expand All @@ -72,9 +72,9 @@ onMounted(async () => {
</p>
</div>
<div class="vt-box">
<h2>功能丰富</h2>
<h2>灵活多变</h2>
<p>
拥有丰富的、可渐进式集成的生态系统,可以根据规模在仅使用一个库和使用整套框架间切换自如
丰富的、可渐进式集成的生态系统,可以根据应用规模在库和框架间切换自如
</p>
</div>
</section>
Expand Down
32 changes: 16 additions & 16 deletions src/about/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 的发展!

Expand All @@ -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 应用。

Expand All @@ -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)提供了一个模块化的开发模型,让应用程序的不同部分能够被隔离开发
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的「应用程序」是否应该根据中文术语约定简写为「应用」呢?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

欢迎 PR 贡献


- [组合式 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 的理由:

Expand All @@ -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 并不会真正成为影响这一决定的因素。

Expand All @@ -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)以了解更多细节。

<!-- ## TODO How does Vue compare to React? -->

Expand Down
12 changes: 6 additions & 6 deletions src/about/releases.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 而调整自身的类型定义。

Expand All @@ -58,7 +58,7 @@ Vue 的发布会遵循[语义化版本控制](https://semver.org/),同时伴

小版本发布通常会经历不定量的 beta 版。而大版本发布则会经历 alpha 和 beta 阶段。

预发布版本是为了进行集成/稳定性测试,并让早期用户为不稳定的功能提供反馈。请不要在生产中使用预发布版本。所有的预发布版本都被认为是不稳定的,并且可能会在两者之间产生不兼容变更,所以在使用预发布版本时,一定要精确锁定版本号。
预发布版本 (pre releases) 是为了进行集成/稳定性测试,并让早期用户为不稳定的功能提供反馈。请不要在生产中使用预发布版本。所有的预发布版本都被认为是不稳定的,并且可能会在两者之间产生不兼容变更,所以在使用预发布版本时,一定要精确锁定版本号。

## 废弃的特性 {#deprecations}

Expand Down
2 changes: 1 addition & 1 deletion src/api/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,7 @@ console.log(app.config)

## app.config.globalProperties {#app-config-globalproperties}

一个用于注册能够被应用内所有组件实例访问到的全局 property 的对象
一个用于注册能够被应用内所有组件实例访问到的全局属性的对象

- **类型**

Expand Down
2 changes: 1 addition & 1 deletion src/api/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ h(Transition, {

注意,每个 `<transition-group>` 的子节点必须有[**独立的 key**](/guide/essentials/list.html#maintaining-state-with-key),动画才能正常工作。

`<TransitionGroup>` 支持通过 CSS transform 过渡移动。当一个子节点在屏幕上的位置在更新之后发生变化时,它会被应用一个使其移动的 CSS class (通过 `name` attribute 自动生成或使用 `move-class` prop 配置)。如果使其移动的 class 被应用时 CSS `transform` property 是“可过渡的”,该元素会通过 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。
`<TransitionGroup>` 支持通过 CSS transform 过渡移动。当一个子节点在屏幕上的位置在更新之后发生变化时,它会被应用一个使其移动的 CSS class (通过 `name` attribute 自动生成或使用 `move-class` prop 配置)。如果使其移动的 class 被应用时 CSS `transform` 属性是“可过渡的”,该元素会通过 [FLIP 技术](https://aerotwist.com/blog/flip-your-animations/)平滑地到达动画终点。

- **示例**

Expand Down
Loading