大厂技术  高级前端  Node进阶

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

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

中文版翻译：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] ) 尤大已经标注：「旧版」

1a4ac19546a2240689c16c96525391bd.png
image.png

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

e7dceec98919d2bb93b5c18a0cd49833.png
image.png

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

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

  1. 新文档的新变化

  2. Vue 3 新文档学习笔记

一、新文档的新变化

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

34ce39ea0550dfa598b38c01469edada.png
新文档的新变化.png

1. 新增了深色模式

9f6df91782de954ceb4456157d80aa29.png
image.png

2. 响应式设计

e6400d0e8bf27a5b08ee324739bd350c.png
image.png

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

d99d9c7f56a9d3418d013346c22f912c.png
image.png

4. 全新的互动教程

e4e4295388bfe9646d152ddd8ba94069.png
image.png

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

2cf1ee36d661163601443195d8f3a340.png
image.png

6. 更快的查找API

ffd4157ae2576c6ea9ebf8c86adf0de3.png
image.png

7. 重做了指引

1918785932791b9b8f192031731620eb.png
image.png

重写了 TypeScript 指引

1480126a4d1c231bcb91a72cc7ca2fa3.png
image.png

重写了深入响应式系统

14c9c8d87110e9509e26670cc678d8cd.png
image.png

重写了渲染机制

c019a7240d615c5522d8a65201b58fb2.png
image.png

全新的可组合函数指引

97bed78e43d864349feb5315bbc09430.png
image.png

新的工具链指引

085e3a6d69081cf669c8fa87944af616.png
image.png

新的性能指引

c4643232b070621f7235170b931621e9.png
image.png

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

f7ccce6cb198cd728025ccaf1e9f3f31.png
image.png

9. 使用 VitePress 构建

5a26abfff777ffa2b0c123f94381fdac.png
image.png

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

d4e90757a5c7752ecc2c2d0da08e8930.png
image.png

二、新文档学习笔记

开始

简介

90a7f1647af6806f9a8dfe3ad14c742f.png
1.1简介.png

快速开始

ddba82afc96a5228bbe63a3478fc4868.png
1.2快速开始.png

基础

创建 Vue 应用

4e2077d869a68f55ff3c6856ef434d3f.png
2.1创建 Vue 应用.png

模板语法

b2f4840fb06fdca40c0e070bc18ed753.png
2.2模板语法.png

响应式基础

3a5f9e968eb4d54eeff3830fd5af59c8.png
2.3响应式基础.png

计算属性

5d5a9083c642454d59e9f78f6bcc9cc6.png
2.4计算属性.png

类与样式绑定

67aa0c9f45b28ec722ff57564a79db4f.png
2.5类与样式绑定.png

条件渲染

7298dee0a611f61e53d6a39638d6db32.png
2.6条件渲染.png

列表渲染

57e4ac32b0cfd786978a5ed6b3246b29.png
2.7列表渲染.png

事件处理

d73d29a88dd301ede5437648fd9f4b76.png
2.8事件处理.png

表单输入绑定

a86be0c96cf5d2bc688ad58777a8f124.png
2.9表单输入绑定.png

生命周期钩子

82f4a2d1c0bd8bd7d5b673a318e73210.png
2.10生命周期钩子.png

侦听器

700bbc9f2ea2f8d1814e7da11e5dd52d.png
2.11侦听器.png

模板 ref

66161af1410e8611a54447479ffd6a71.png
2.12模板 ref.png

组件基础

f04fbefe45ce254d2d086c64f93c0193.png
2.13组件基础.png

深入组件

组件注册

40ae84b9607de6ff9e23e4b5fe171a7d.png
3.1组件注册.png

Props

283173d19a43bbe530e214cc7745761c.png
3.2Props.png

组件事件

1508828dde555c0325e5152638945351.png
3.3组件事件.png

透传 attribute

be7f3b65f5fd3b330fe6e26be0ca6c7b.png
3.4透传 attribute.png

插槽

207b30bb4a000d824f4daa1dc72c3fad.png
3.5插槽.png

依赖注入

7a7dc55fff6cbf06449f7d09770cbc19.png
3.6依赖注入.png

异步组件

8eeec2442736905b2c47c018d6f87b0e.png
3.7异步组件.png

可重用性

可组合函数

bd6bfd32385ecfa0542aec4e75ce75b5.png
4.1可组合函数.png

自定义指令

206c4e832b315fa23d6d105bbb1f86b5.png
4.2自定义指令.png

插件

62185445482ffec9eaf87795104d1b23.png
4.3插件.png

内置组件

Transition

10f94d8a1105bd3cc55fa4b7b8f62c62.png
5.1Transition·过渡.png

TransitionGroup

4985d2eecc4f518bbabc760b7417a3c7.png
5.2TransitionGroup·过渡组.png

KeepAlive

4dd14f598d1fe09a8404d671feb83131.png
5.3KeepAlive.png

Teleport

dc26b7a7a0068c3078e485d469ca7897.png
5.4Teleport·传送门.png

Suspense

d6a7144a6fbc7c61b26660cbebaeb7e1.png
5.5Suspense.png

升级规模

单文件组件

a91317c454e0cdb050904cc5479d0399.png
6.1单文件组件.png

工具链

67184cea6c0f2a289ef98601dc3f43f4.png
6.2工具链.png

路由

f29ebdd4e4356c09deddad9706af4a5f.png
6.3路由.png

状态管理

9e455fe43af6640d33c61c6fbf819784.png
6.4状态管理.png

测试

e86051aca806f5e1a042ebf8ece3e1f9.png
6.5测试.png

服务端渲染 (SSR)

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

最佳实践

生产环境部署

615b364f343e9e307d6353c53d8d6929.png
7.1生产环境部署.png

性能

428251bdf482ceab5329baf950f04290.png
7.2性能.png

无障碍访问

96815195a22bd7f572ef9e092012ee15.png
7.3无障碍访问.png

安全

7a8d1996566b6cb2e512e8f9774c750a.png
7.4安全.png

与TS

搭配 TypeScript 使用 Vue

b1e676f99469821d340e61cb7fbd0915.png
8.1搭配 TypeScript 使用 Vue.png

TypeScript 与组合式 API

28be2dae2dfa923267ee560dcc182734.png
8.2TypeScript 与组合式 API.png

TypeScript 与选项式 API

712ebc9b1e610fa71e583196bda0f60c.png
8.3TypeScript 与选项式 API.png

进阶

多种方式使用 Vue

25cb53183a5e959a624a8a7aac3e3733.png
9.1多种方式使用 Vue.png

组合式 API FAQ

67e3641412d370aab3957f1161306bca.png
9.2组合式 API FAQ.png

深入响应式系统

9105e8f5cac81152d3101d8f3f99c30c.png
9.3深入响应式系统.png

渲染机制

7faedb36ee8896c43bdb43bd6c85bb01.png
9.4渲染机制.png

渲染函数 & JSX

904c31d1188e54eb221bad8cf2c09077.png
9.5渲染函数 & JSX.png

附件

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

补充说明

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

结语

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

原文地址

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

903d1640f93f585cbd11ed35fae18b4a.png

Vue 社群


我组建了一个氛围特别好的 Vue 社群，里面有很多 Vue 小伙伴，如果你对  Vue 学习感兴趣的话（后续有计划也可以），我们可以一起进行 Vue相关的交流、学习、共建。下方加 考拉 好友回复「Vue」即可。

如果你觉得这篇内容对你有帮助，我想请你帮我2个小忙：

1. 点个「在看」，让更多人也能看到这篇文章2. 订阅官方博客 www.inode.club 让我们一起成长

点赞和在看就是最大的支持❤️
# java # 编程语言 # html # xhtml
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

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue