Discover Vue 3’s New Documentation: Features, Guides, and a 50‑Map Study Notebook
This article introduces the freshly released Chinese Vue 3 documentation, outlines its ten major updates—including dark mode, responsive design, API style switching, and VitePress integration—provides a comprehensive study notebook with 50 mind‑maps, and offers download links for the original xmind files.
New documentation address: https://vuejs.org/. Chinese translation: https://staging-cn.vuejs.org/. Old Chinese version: v3.cn.vuejs.org (marked as old).
After reading you will gain two takeaways: 1) Understand the new changes in the documentation; 2) Obtain a Vue 3 new‑documentation study notebook (50 mind‑maps, original xmind files, download link at the bottom).
1. Preface
Author LBJ participated in the translation and verification of the Vue 3 documentation ( vuejs.org). The English version has been live for over a month, and the Chinese translation is now officially available.
The previous Chinese site ( v3.cn.vuejs.org) was marked as outdated. The new site removes the “writing in progress” and “preview only” banners, indicating that the translated stable pages are ready for reading.
2. New Documentation Changes
The following ten major updates are highlighted (each accompanied by an illustration):
Dark mode added
Responsive design
API style switch (Options vs. Composition) in guides, tutorials and examples
New interactive tutorials
New examples, including implementations of 7GUIs
Faster API search
Redesigned guides
TypeScript guide
Deep reactivity system guide
Rendering mechanism guide
New composable‑function guide
New toolchain guide
New performance guide
Single‑page navigation + intelligent pre‑fetch of viewport links
Built with VitePress
Automatic hydration of partially static content
3. New Documentation Study Notebook
Introduction
Quick Start
Basics
Create Vue app
Template syntax
Reactivity basics
Computed properties
Class and style binding
Conditional rendering
List rendering
Event handling
Form input binding
Lifecycle hooks
Watchers
Template ref
Component basics
Deep Component Topics
Component registration
Props
Component events
Attribute forwarding
Slots
Dependency injection
Async components
Reusability
Composable functions
Custom directives
Plugins
Built‑in Components
Transition
TransitionGroup
KeepAlive
Teleport
Suspense
Scale Upgrade
Single‑file components
Toolchain
Router
State management
Testing
Server‑Side Rendering (SSR)
Best Practices
Performance
Accessibility
Security
Using TypeScript
Vue with TypeScript
TypeScript + Composition API
TypeScript + Options API
Advanced Topics
Multiple ways to use Vue
Composition API FAQ
Deep reactivity system
Rendering mechanism
Render functions & JSX
Attachment
The original mind‑map images and the xmind files have been uploaded to GitHub. You can download them from:
https://github.com/jCodeLife/mind-map/tree/master/Vue3新文档Supplementary Note
Because the Chinese documentation is still in a non‑official rollout, some pages may not be translated yet. Currently only the files under src\guide have been translated. More stable pages will be added as the project progresses, and contributions are welcome.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Java High-Performance Architecture
Sharing Java development articles and resources, including SSM architecture and the Spring ecosystem (Spring Boot, Spring Cloud, MyBatis, Dubbo, Docker), Zookeeper, Redis, architecture design, microservices, message queues, Git, etc.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.