49c2e39abc633a0ea21d0298c7a3186b.png

焕然一新的 Vue 3 中文文档来了🎉

新文档地址：vuejs.org[1]

中文版翻译：staging-cn.vuejs.org[2]

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

  1. 了解新文档的新变化

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

前言

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

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

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

关注公众号 前端开发博客，领27本电子书

回复加群，自助秒进前端群

为什么说它要来了呢？

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

17ad188a0eab2ed4fd56a401032ae506.png
image.png

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

bd318788e60b0f0e48847a38be90d66a.png
image.png

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

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

  1. 新文档的新变化

  2. Vue 3 新文档学习笔记

还可以看看：Vue3 对比Vue2，你找到哪些变化？

一、新文档的新变化

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

8d31576471249ec09f5073fa6e63944b.png
新文档的新变化.png

1. 新增了深色模式 前端开发博客

ac942ecb23b64dceedd20332a346c67a.png
image.png

2. 响应式设计

f5a395762888cf55a8514a4ef3e535d3.png
image.png

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

03e69c148906788b1c66dc4753fa6acb.png
image.png

4. 全新的互动教程

7adf583c8bd15b1ab343b83db1e518ce.png
image.png

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

cb9468661443e58c22ca790aae3741a3.png
image.png

6. 更快的查找API

52d3928273683229b85fec66fae05ff1.png
image.png

7. 重做了指引

e5f4744782d860d5ed5be1dac1022b56.png
image.png

重写了 TypeScript 指引

9ebbac7167ab5ef6daa82d2b501a1b37.png
image.png

重写了深入响应式系统

e9cee65e750ae6af26c3a059422ebc71.png
image.png

重写了渲染机制

18abb9a347235f4dd57630858e04b361.png
image.png

全新的可组合函数指引

6c468f16836c8f495cca9ee47ee7147a.png
image.png

新的工具链指引

9ab5f90b9d22fa74fec28846213edf41.png
image.png

新的性能指引

99f43ce6a81178a21d0b490bd47f6002.png
image.png

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

a2fdf4f9be5ed1507ce957ad69ec0777.png
image.png

9. 使用 VitePress 构建

8f441061cf57630a3ed7dda4a8bfc3b2.png
image.png

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

6f207886be66f6579dd9dd45e83126be.png
image.png

二、新文档学习笔记

开始

简介

1691aeecf2ed12d0ea5a848f4aa82010.png
1.1简介.png

快速开始

f4f7168cfa5aee11c41894cfef52ff87.png
1.2快速开始.png

基础

创建 Vue 应用

318d345fff0f1faa7fd90da952b18be3.png
2.1创建 Vue 应用.png

模板语法

03b1bef1967a2ddb3fa37ece4d1a437d.png
2.2模板语法.png

响应式基础

8c04aebc77279301ee89c99429bea05d.png
2.3响应式基础.png

计算属性

5b509f2192c5eede030244c77aca23cf.png
2.4计算属性.png

类与样式绑定

279fd5641a879bac1175e4127cf1057d.png
2.5类与样式绑定.png

条件渲染

584265444283684483e607ee58129b68.png
2.6条件渲染.png

列表渲染

8c20fd677ec390d49a1199bdfd091d18.png
2.7列表渲染.png

事件处理

04e0bb89f3788bd984a917cea57ce4cd.png
2.8事件处理.png

表单输入绑定

54c3c5bc5c5af8a942d5ce04e430e67c.png
2.9表单输入绑定.png

生命周期钩子

a19d0a739f76cc000128429f7df13389.png
2.10生命周期钩子.png

侦听器

0014c5b87e500bceefe1dc5c3b801ea4.png
2.11侦听器.png

模板 ref

2e2eb765765737def59bb7a75bec1b5f.png
2.12模板 ref.png

组件基础

e775395bc1abbc17803243dde70eced1.png
2.13组件基础.png

深入组件

组件注册

b8ea593686c4833310ad30f6fb05ee2b.png
3.1组件注册.png

Props

8042507fab8c85002c608ed8b0d73df3.png
3.2Props.png

组件事件

ab30b674d241d4204d05c1f511a056d7.png
3.3组件事件.png

透传 attribute

569d5e9136cf7209641190367e3e40f6.png
3.4透传 attribute.png

插槽

f6b98d54c9a231c5fa2442ccd4b82bb9.png
3.5插槽.png

依赖注入

6888d250d4caa53c7f038dd7353324cc.png
3.6依赖注入.png

异步组件

b65d997d22b514b062e9622b8e2bbc8e.png
3.7异步组件.png

可重用性

可组合函数

acda5ad7aff6fc95651e7cff70c14071.png
4.1可组合函数.png

自定义指令

b419f6e946f459c00b73558d9d4185b3.png
4.2自定义指令.png

插件

d9aba678b24224b06cc8a813ce501496.png
4.3插件.png

内置组件

Transition

ccd3062544fd8b3f38aaeced40a38f53.png
5.1Transition·过渡.png

TransitionGroup

b5417257e44da654ebcec6f5fd4905fc.png
5.2TransitionGroup·过渡组.png

KeepAlive

8c9285fb89d0ecccd2399574fc13d933.png
5.3KeepAlive.png

Teleport

54e0836cd6f04ec9a0eeb3c35bc85f1d.png
5.4Teleport·传送门.png

Suspense

e0cf32f35abf7572719b8a8a84c45372.png
5.5Suspense.png

升级规模

单文件组件

9ed1a638c4286a704a9e775e369b74d8.png
6.1单文件组件.png

工具链

6abecbd5262cdc909507ca7b61c5503f.png
6.2工具链.png

路由

933a88a493b436a8e5ebcfaa4073c134.png
6.3路由.png

状态管理

60b5c1311475a45220ea44ce1f4bfe74.png
6.4状态管理.png

测试

0d3a0987677b9381acac0df852c775dc.png
6.5测试.png

服务端渲染 (SSR)

ae90dec5826e34610e88cb9fc293d810.png
6.6服务端渲染 (SSR).png

最佳实践

生产环境部署

1d0c4b80a1632159f068dcb33b43713d.png
7.1生产环境部署.png

性能

88f08ec2a3f709f9a96e87e088d285ca.png
7.2性能.png

无障碍访问

68ce6209498aa844f90784cf30e1c80b.png
7.3无障碍访问.png

安全

aa25ad984ebc1b5ebb8449a533e99534.png
7.4安全.png

与TS

搭配 TypeScript 使用 Vue

60eeb8c12e58babd8de0fcdf892cafb9.png
8.1搭配 TypeScript 使用 Vue.png

TypeScript 与组合式 API

e4009b9af222047a2088952e63ced875.png
8.2TypeScript 与组合式 API.png

TypeScript 与选项式 API

370cfd3ac38962dd195b84021a941748.png
8.3TypeScript 与选项式 API.png

进阶

多种方式使用 Vue

43053a818b92637ec068b7cae23a9995.png
9.1多种方式使用 Vue.png

组合式 API FAQ

455b26c050e77df180c7df168aae8dfc.png
9.2组合式 API FAQ.png

深入响应式系统

aae0527d5893dd9ee59d0a2c6557acf0.png
9.3深入响应式系统.png

渲染机制

0c4b9ea08f18b71edb53d2be6ca27877.png
9.4渲染机制.png

渲染函数 & JSX

c241381c7b9fc8dff42fa4284abffac3.png
9.5渲染函数 & JSX.png

附件

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

补充说明

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

结语

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

推荐链接

  1. 不要再用 Vue2 的思维写 Vue3 了

  2. 前端程序员简历模板整理和下载

  3. Vue3有哪些不向下兼容的改变

关注公众号 前端开发博客，回复以下关键词

查看更多优质内容！

加群 | 进阶 | 电子书 | 资料 | 面试 

简历 | 简历模板 | 思维图 | 知识点 | Vue脑图

6227a33416d42a835aebcf1ed847d113.png

分享好文和朋友一起看~

创作不易，加个点赞、在看 支持一下哦！91b600e580b989b51b6b93813dd1e461.png

# java # 编程语言 # html
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue