vlambda博客
学习文章列表

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

关注 Vue社区,回复“加群

https://juejin.cn/post/7077701166397653028


中文版翻译:staging-cn.vuejs.org[2] (官方已标注为新版)

旧版中文版:v3.cn.vuejs.org (官方已标注为旧版)

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

  1. 了解新文档的新变化
  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!焕然一新的 Vue3 中文文档来了!
image.png

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

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

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

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

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

一、新文档的新变化

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

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

1. 新增了深色模式

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

2. 响应式设计

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

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

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

4. 全新的互动教程

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

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

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

6. 更快的查找API

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

7. 重做了指引

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

重写了 TypeScript 指引

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

重写了深入响应式系统

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

重写了渲染机制

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

全新的可组合函数指引

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

新的工具链指引

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

新的性能指引

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

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

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

9. 使用 VitePress 构建

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

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

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

二、新文档学习笔记

开始

简介

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

快速开始

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

基础

创建 Vue 应用

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

模板语法

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

响应式基础

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

计算属性

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

类与样式绑定

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

条件渲染

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

列表渲染

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

事件处理

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

表单输入绑定

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

生命周期钩子

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

侦听器

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

模板 ref

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

组件基础

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

深入组件

组件注册

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

Props

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

组件事件

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

透传 attribute

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

插槽

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

依赖注入

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

异步组件

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

可重用性

可组合函数

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

自定义指令

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

插件

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

内置组件

Transition

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

TransitionGroup

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

KeepAlive

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

Teleport

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

Suspense

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

升级规模

单文件组件

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

工具链

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

路由

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

状态管理

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

测试

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

服务端渲染 (SSR)

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

最佳实践

生产环境部署

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

性能

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

无障碍访问

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

安全

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

与TS

搭配 TypeScript 使用 Vue

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

TypeScript 与组合式 API

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

TypeScript 与选项式 API

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

进阶

多种方式使用 Vue

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

组合式 API FAQ

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

深入响应式系统

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

渲染机制

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

渲染函数 & JSX

9.5渲染函数 & JSX.png

附件

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

补充说明

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

❤️ 看完两件事

如果你觉得这篇内容对你挺有启发,我想邀请你帮我两个小忙:

  1. 点个「在看」,让更多的人也能看到这篇内容(喜欢不点在看,都是耍流氓 -_-)

点个在看支持我吧,转发就更好了