人手一份!Vue 3 中文文档来啦!

8e803b26e50435120bd9408aacef789a.png

点击蓝字 关注我们

54d2a16fdd294d3589727e38d58ca29f.png

内容转载于掘金,作者 LBJ

我们知道 Vue 3 新文档 ( vuejs.org ) 已经发布一段时间了,但那是英文版的,不知道你看了没?

没有看,那就有福了!中文版翻译要来了!

为什么说它要来了呢?

一是,原 Vue 3 中文文档 ( v3.cn.vuejs.org ) 尤大已经标注:旧版

5ddfc68cc0fa52e21e401f864a274028.png

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

1c1312aeda648b95dda0a3c8d81f445a.png

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

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

  • 新文档的新变化

  • Vue 3 新文档学习笔记

3159ca3e84bded2fdd66b8504c159cf6.png

01

新文档的新变化

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

501b61247b0203b1a433c6aee92831b1.png

1. 新增了深色模式

62b2095df907a82a890a2f741dc8ef5d.png

2. 响应式设计

ea1ee7bf0ed4478fad9a6aca283f8356.png

3. 在指引、教程和范例中新增 API 风格切换功能

(选择 Options 或者 Composition API)

f0862c810e6f9b28c7fd0d8d0c1b2db8.png

4. 全新的互动教程

0f1439c0cc00982eed2d1fecdeee0ff8.png

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

b53fb18d73a50a2948239b9616774e7d.png

6. 更快的查找API

94e1dd3e39a3f030277e0fc43cd8d12f.png

7. 重做了指引

f9fb34246ea700349c51b6a1ca6372c7.png

重写了 TypeScript 指引

2496614a4c2326297dd664ff4a0e6660.png

重写了深入响应式系统

6ff9f462c7f7ec960d89b780a71b9bff.png

重写了渲染机制

90826a83ee52b0cc92a0e3dc15b47ed9.png

全新的可组合函数指引

2ef7d6a4542a5810f66b760acb59de3b.png

新的工具链指引

0b14eabf7abfc9c77db14d83b6b983ba.png

新的性能指引

fe8d3fb652b9362a2a9f2ad9e7d7a628.png


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

f1211626a39b60d574442ffbabad4314.png

9. 使用 VitePress 构建

d2a645aee0a9f05ebb041ef977bf713a.png

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

a968cceea46ec4295b9567ad2bff46d3.png

a1251390b469c8e758b90887aa40ac27.png

02

新文档学习笔记


开始

简介

f4b2bbacb97271a1ff842cb9a6bc698c.png

快速开始

a6c774efbd24762dfc36d43d0eec301a.png

基础

创建 Vue 应用

2196c5da54d891ec047d83cf08c0b047.png

模板语法

b53c9d9a77b5894a5c86be9f4f52f6db.png

响应式基础

597d2db02c006caafbda26491d8a21b3.png

计算属性

948e56b3a9c218d8d2f497c993569224.png

类与样式绑定

c327635d2b6b6ce4f57dbbdae28c48b7.png

条件渲染

615e02e315fa5abc9eb87ece3069bf4f.png

列表渲染

c5858591416c2fe78c5fcdaa08e3a032.png

事件处理

a2d6bc252fdb73d97acb841ad62f9d98.png

表单输入绑定

dfa05cfc80b7ee2482c7b92fc100d15e.png

生命周期钩子

af9a22ab914c7aa372f868c544af1e15.png

侦听器

d777268191ecc3cdc6b2395c6ff79de0.png

模板 ref

448fa33b7fadaab8e17263f041a2bfd3.png

组件基础

ba93af6d220c3813889db5b716ebb2a9.png

深入组件

组件注册

e51f1feb96ff8721c8b8d443f594a1bc.png

Props

b2f3ff0e0d998eb4c7d0af83fc5af51b.png

组件事件

b3d33a622a182833d51bb8d69bcc23de.png

透传 attribute

89b62a0d698e55906e60434814366163.png

插槽

74650a66dc3e9a08e5ee88169ec7487f.png

依赖注入

220611a0fd21a5b33f95d1d19876b237.png

异步组件

6be7d692d7240dd0beb5f8bcdba2c329.png

可重用性

可组合函数

7a0e2b09d66bfdc89a18df717cb6be50.png

自定义指令

5143883529ed7af8cbb959012a7bb367.png

插件

9ef8c4582229ef64b27701d560670bd6.png

内置组件

Transition

eabf90b53d2d447087c2ca19469602b2.png


TransitionGroup

dd7016515e09e25440564976d5955453.png


KeepAlive

378eceefc960bea29f0d9dad963d715c.png

Teleport

74351bba7fcecab42844abab09145ac2.png

Suspense

539688e9e3407051b72989ea1b6fc8de.png

升级规模

单文件组件

79396c69aaf48490f24ba3810df99772.png

工具链

619a22785147bec6f30d964cd95f2c65.png

路由

7c9226d1cef9223afb7c4c40e4763a17.png

状态管理

9604d0c33236a4a04c2a7dbe451e3333.png

测试

97ec26f6af9ccd663d492d7325c78cb8.png

服务端渲染 (SSR)

e5f52a5e4923ff81b7d4e9ba3fd36168.png


最佳实践

生产环境部署

3eb264706586a7c5396e32ea00faa7b2.png


性能

f0f95d98fb527eee0630a362bf317eef.png


无障碍访问

77beb0dfcb1c04ba2e2456ba610eb523.png

安全

aec85f758c7ef087a34faa86479ac777.png

与 TS

搭配 TypeScript 使用 Vue

cb0c138a9c5f675bc12dd03be06a9499.png

TypeScript 与组合式 API

3bbd991950eedb1f6534052b4fa0caa1.png

TypeScript 与选项式 API

c6f9ddbf1c15849d00812e8ddc6d36f5.png

进阶

多种方式使用 Vue

eaff3ce2e2641ca1e9f77a445ddfa05b.png

组合式 API FAQ

fd4f430438668621356fc0e33be2f60c.png

深入响应式系统

41948701a42a68b9dd9f17ddf2a87759.png

渲染机制

3d7bcbe3d20bacec21b3464b32f969ea.png

渲染函数 & JSX

befd72f038f837dc091d4f490ba8637c.png

附件

作者已将上述思维导图原图及原 xmind 文档上传到 github,如有需要可自行下载:文末“阅读原文”直达


补充说明

看新的中文文档时,可能你会遇到一些问题,比如有些页面未翻译等等。

不要诧异,因为中文版非正式上线,可能存在问题,截止目前仅集中翻译了 src\guide 目录下的文档,正式上线的英文版也还在更新中,所以之后会增加其他稳定页面的翻译和校验。

09c772d70e5895e65d08ad860ef61768.png

03

蓝桥云课福利

蓝桥云课为大家提供了代码交流群供大家讨论,欢迎加入哦~

35b9c10c199b97ecf7bdbfb2afbd1cc6.png

dfdb54904ec74a5b143e2cceabd1c649.gif

戳戳“阅读原文”直达下载页面!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值