vlambda博客
学习文章列表

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

中文版翻译:https://staging-cn.vuejs.org/

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

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

1、了解新文档的新变化

2、收获一份 Vue 3 新文档学习笔记(50张思维导图,附原图及原 xmind 文档,底部获取链接





一、前言




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

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

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

为什么说它要来了呢?

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

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

  1. 新文档的新变化

  2. Vue 3 新文档学习笔记



二、新文档的新变化




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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

1. 新增了深色模式

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

2. 响应式设计

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

4. 全新的互动教程

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

6. 更快的查找API

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

7. 重做了指引

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

重写了 TypeScript 指引

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

重写了深入响应式系统

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

重写了渲染机制

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

全新的可组合函数指引

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

新的工具链指引

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

新的性能指引

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

9. 使用 VitePress 构建

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!




三、新文档学习笔记




开始

简介

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

快速开始

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

基础

创建 Vue 应用

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

模板语法

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

响应式基础

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

计算属性

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

类与样式绑定

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

条件渲染

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

列表渲染

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

事件处理

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

表单输入绑定

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

生命周期钩子

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

侦听器

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

模板 ref

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

组件基础

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

深入组件

组件注册

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

Props

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

组件事件

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

透传 attribute

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

插槽

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

依赖注入

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

异步组件

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

可重用性

可组合函数

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

自定义指令

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

插件

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

内置组件

Transition

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

TransitionGroup

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

KeepAlive

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

Teleport

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

Suspense

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

升级规模

单文件组件

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

工具链

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

路由

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

状态管理

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

测试

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

服务端渲染 (SSR)

最佳实践焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!生产环境部署

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

性能

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

无障碍访问

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

安全

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

与TS

搭配 TypeScript 使用 Vue

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

TypeScript 与组合式 API

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

TypeScript 与选项式 API

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

进阶

多种方式使用 Vue

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

组合式 API FAQ

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

深入响应式系统

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

渲染机制

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

渲染函数 & JSX

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

附件

作者已将上述思维导图原图及原 xmind 文档上传到 github

如有需要可自行下载

https://github.com/jCodeLife/mind-map/tree/master/Vue3新文档

补充说明

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

焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!

来自:掘金

原文链接:https://juejin.cn/post/7077701166397653028

版权声明,内容来源网络,仅供分享学习,版权归原创作者所有,除非无法确认,我们都会标明作者及出处,如有侵权烦请告知,我们会立即删除表示歉意。谢谢!


焕然一新的Vue3来啦!送50张思维导图,学习笔记(含xmind原文档)!




主页菜单有架构师相关资料,点击学习资料菜单免费获取!

如有收获,点个在看,诚挚感谢