vlambda
2022-04-11

焕然一新! Vue3 中文文档来了！

中文版翻译：staging-cn.vuejs.org^[2] （官方已标注为新版）

旧版中文版：v3.cn.vuejs.org （官方已标注为旧版）

看完本篇你将有2点「收获」：

❝

了解新文档的新变化

收获一份 Vue 3 新文档学习笔记（ 50张思维导图，附原图及原 xmind 文档）

❞

前言

大家好，我是LBJ，最近参与了 Vue 3新文档的翻译和校验工作 (vuejs/docs contributor^[3] 和 docs-zh-cn contributor^[4])

我们知道 Vue 3 新文档 ( `vuejs.org`^[5] ) 已经发布一个多月了，但那是英文版的，不知道你看了没？

没有看，那就有福了！「中文版翻译」要来了🎁

为什么说它要来了呢？

一是，原 Vue 3 中文文档 ( v3.cn.vuejs.org^[6] ) 尤大已经标注：「旧版」

焕然一新! Vue3 中文文档来了！ — image.png

二是，新文档vuejs.org 对应的中文版翻译已经将英文版中稳定的页面翻译完毕！而且前天官方已经将 banner中的移除「编写中」、「仅供预览」等字样，这意味着新的中文文档已经可以开始供大家阅读了

焕然一新! Vue3 中文文档来了！ — image.png

因此，「焕然一新的 Vue 3 中文文档它来了」，和我一起先睹为快，看看文档都有哪些新变化吧

以下正文内容将分为两部分：

新文档的新变化
Vue 3 新文档学习笔记

一、新文档的新变化

一图简单小结了10点主要的变化，如下

焕然一新! Vue3 中文文档来了！ — 新文档的新变化.png

1. 新增了深色模式

焕然一新! Vue3 中文文档来了！ — image.png

2. 响应式设计

焕然一新! Vue3 中文文档来了！ — image.png

3. 在指引、教程和范例中新增API风格切换功能（选择Options或者Composition API）

焕然一新! Vue3 中文文档来了！ — image.png

4. 全新的互动教程

焕然一新! Vue3 中文文档来了！ — image.png

5. 新增了例子,包括7GUIs的实现

焕然一新! Vue3 中文文档来了！ — image.png

6. 更快的查找API

焕然一新! Vue3 中文文档来了！ — image.png

7. 重做了指引

焕然一新! Vue3 中文文档来了！ — image.png

重写了 TypeScript 指引

焕然一新! Vue3 中文文档来了！ — image.png

重写了深入响应式系统

焕然一新! Vue3 中文文档来了！ — image.png

重写了渲染机制

焕然一新! Vue3 中文文档来了！ — image.png

全新的可组合函数指引

焕然一新! Vue3 中文文档来了！ — image.png

新的工具链指引

焕然一新! Vue3 中文文档来了！ — image.png

新的性能指引

焕然一新! Vue3 中文文档来了！ — image.png

8. 单页面导航+智能预读取视口中的链接

焕然一新! Vue3 中文文档来了！ — image.png

9. 使用 VitePress 构建

焕然一新! Vue3 中文文档来了！ — image.png

10. 自动水合部分静态内容

焕然一新! Vue3 中文文档来了！ — image.png

二、新文档学习笔记

开始

简介

焕然一新! Vue3 中文文档来了！ — 1.1简介.png

快速开始

焕然一新! Vue3 中文文档来了！ — 1.2快速开始.png

基础

创建 Vue 应用

焕然一新! Vue3 中文文档来了！ — 2.1创建 Vue 应用.png

模板语法

焕然一新! Vue3 中文文档来了！ — 2.2模板语法.png

响应式基础

焕然一新! Vue3 中文文档来了！ — 2.3响应式基础.png

计算属性

焕然一新! Vue3 中文文档来了！ — 2.4计算属性.png

类与样式绑定

焕然一新! Vue3 中文文档来了！ — 2.5类与样式绑定.png

条件渲染

焕然一新! Vue3 中文文档来了！ — 2.6条件渲染.png

列表渲染

焕然一新! Vue3 中文文档来了！ — 2.7列表渲染.png

事件处理

焕然一新! Vue3 中文文档来了！ — 2.8事件处理.png

表单输入绑定

焕然一新! Vue3 中文文档来了！ — 2.9表单输入绑定.png

生命周期钩子

焕然一新! Vue3 中文文档来了！ — 2.10生命周期钩子.png

侦听器

焕然一新! Vue3 中文文档来了！ — 2.11侦听器.png

模板 ref

焕然一新! Vue3 中文文档来了！ — 2.12模板 ref.png

组件基础

焕然一新! Vue3 中文文档来了！ — 2.13组件基础.png

深入组件

组件注册

焕然一新! Vue3 中文文档来了！ — 3.1组件注册.png

Props

焕然一新! Vue3 中文文档来了！ — 3.2Props.png

组件事件

焕然一新! Vue3 中文文档来了！ — 3.3组件事件.png

透传 attribute

焕然一新! Vue3 中文文档来了！ — 3.4透传 attribute.png

插槽

焕然一新! Vue3 中文文档来了！ — 3.5插槽.png

依赖注入

焕然一新! Vue3 中文文档来了！ — 3.6依赖注入.png

异步组件

焕然一新! Vue3 中文文档来了！ — 3.7异步组件.png

可重用性

可组合函数

焕然一新! Vue3 中文文档来了！ — 4.1可组合函数.png

自定义指令

焕然一新! Vue3 中文文档来了！ — 4.2自定义指令.png

插件

焕然一新! Vue3 中文文档来了！ — 4.3插件.png

内置组件

Transition

焕然一新! Vue3 中文文档来了！ — 5.1Transition·过渡.png

TransitionGroup

焕然一新! Vue3 中文文档来了！ — 5.2TransitionGroup·过渡组.png

KeepAlive

焕然一新! Vue3 中文文档来了！ — 5.3KeepAlive.png

Teleport

焕然一新! Vue3 中文文档来了！ — 5.4Teleport·传送门.png

Suspense

焕然一新! Vue3 中文文档来了！ — 5.5Suspense.png

升级规模

单文件组件

焕然一新! Vue3 中文文档来了！ — 6.1单文件组件.png

工具链

焕然一新! Vue3 中文文档来了！ — 6.2工具链.png

路由

焕然一新! Vue3 中文文档来了！ — 6.3路由.png

状态管理

焕然一新! Vue3 中文文档来了！ — 6.4状态管理.png

测试

焕然一新! Vue3 中文文档来了！ — 6.5测试.png

服务端渲染 (SSR)

焕然一新! Vue3 中文文档来了！ — 6.6服务端渲染 (SSR).png

最佳实践

生产环境部署

焕然一新! Vue3 中文文档来了！ — 7.1生产环境部署.png

性能

焕然一新! Vue3 中文文档来了！ — 7.2性能.png

无障碍访问

焕然一新! Vue3 中文文档来了！ — 7.3无障碍访问.png

安全

焕然一新! Vue3 中文文档来了！ — 7.4安全.png

与TS

搭配 TypeScript 使用 Vue

焕然一新! Vue3 中文文档来了！ — 8.1搭配 TypeScript 使用 Vue.png

TypeScript 与组合式 API

焕然一新! Vue3 中文文档来了！ — 8.2TypeScript 与组合式 API.png

TypeScript 与选项式 API

焕然一新! Vue3 中文文档来了！ — 8.3TypeScript 与选项式 API.png

进阶

多种方式使用 Vue

焕然一新! Vue3 中文文档来了！ — 9.1多种方式使用 Vue.png

组合式 API FAQ

焕然一新! Vue3 中文文档来了！ — 9.2组合式 API FAQ.png

深入响应式系统

焕然一新! Vue3 中文文档来了！ — 9.3深入响应式系统.png

渲染机制

焕然一新! Vue3 中文文档来了！ — 9.4渲染机制.png

渲染函数 & JSX

9.5渲染函数 & JSX.png

附件

已将上述思维导图原图及原 xmind 文档上传到 github，如有需要可自行下载：传送门 ^[7]

补充说明

看新的中文文档时，可能你会遇到一些问题，比如有些页面未翻译等等。不要诧异，因为中文版非正式上线，可能存在问题，截止目前仅集中翻译了src\guide目录下的文档，正式上线的英文版也还在更新中，所以之后会增加其他稳定页面的翻译和校验，还有很多工作，欢迎一起参与进来🤞

结语

以上是本文的所有内容，如有问题欢迎指正 🤞

原文地址

原文：https://juejin.cn/post/7077701166397653028
作者：LBJ

欢迎长按图片加刷碗智为好友，我会第一时间和你分享前端行业趋势，学习途径，搞怪趣事，生活中的另一面幽默等等。新的一年我们一起洗刷刷！！！！！！