煥然一新的 Vue3 中文文件來了！

語言: CN / TW / HK
時間 2022-03-29 09:30:06
主題:

新文件地址： 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] ) 已經發佈一個多月了，但那是英文版的，不知道你看了沒？

沒有看，那就有福了！ 「中文版翻譯」 要來了:gift:

為什麼說它要來了呢？

一是，原 Vue 3 中文文件 (  v3.cn.vuejs.org [6] ) 尤大已經標註： 「舊版」

image.png

二是，新文件 vuejs.org 對應的中文版翻譯已經將  英文版中穩定的頁面 翻譯完畢！而且前天官方已經將  banner 中的移除  「編寫中」 、 「僅供預覽」 等字樣，這意味著新的中文文件已經可以開始供大家閱讀了

image.png

因此， 「煥然一新的  Vue 3  中文文件它來了」 ，和我一起先睹為快，看看文件都有哪些新變化吧

以下正文內容將分為兩部分：

  1. 新文件的新變化

  2. Vue 3 新文件學習筆記

一、新文件的新變化

一圖簡單小結了 10 點主要的變化，如下

新文件的新變化.png

1. 新增了深色模式

image.png

2. 響應式設計

image.png

3. 在指引、教程和範例中新增API風格切換功能（選擇Options或者Composition API）

image.png

4. 全新的互動教程

image.png

5. 新增了例子,包括7GUIs的實現

image.png

6. 更快的查詢API

image.png

7. 重做了指引

image.png

重寫了 TypeScript 指引

image.png

重寫了深入響應式系統

image.png

重寫了渲染機制

image.png

全新的可組合函式指引

image.png

新的工具鏈指引

image.png

新的效能指引

image.png

8. 單頁面導航+智慧預讀取視口中的連結

image.png

9. 使用 VitePress 構建

image.png

10. 自動水合部分靜態內容

image.png

二、新文件學習筆記

1.1簡介.png

快速開始

1.2快速開始.png

建立 Vue 應用

2.1建立 Vue 應用.png

模板語法

2.2模板語法.png

響應式基礎

2.3響應式基礎.png

計算屬性

2.4計算屬性.png

類與樣式繫結

2.5類與樣式繫結.png

條件渲染

2.6條件渲染.png

列表渲染

2.7列表渲染.png

事件處理

2.8事件處理.png

表單輸入繫結

2.9表單輸入繫結.png

生命週期鉤子

2.10生命週期鉤子.png
2.11偵聽器.png

模板 ref

2.12模板 ref.png

元件基礎

2.13元件基礎.png

深入元件

元件註冊

3.1元件註冊.png
3.2Props.png

元件事件

3.3元件事件.png

透傳 attribute

3.4透傳 attribute.png
3.5插槽.png

依賴注入

3.6依賴注入.png

非同步元件

3.7非同步元件.png

可重用性

可組合函式

4.1可組合函式.png

自定義指令

4.2自定義指令.png
4.3外掛.png

內建元件

Transition

5.1Transition·過渡.png

TransitionGroup

5.2TransitionGroup·過渡組.png

KeepAlive

5.3KeepAlive.png

Teleport

5.4Teleport·傳送門.png

Suspense

5.5Suspense.png

升級規模

單檔案元件

6.1單檔案元件.png
6.2工具鏈.png
6.3路由.png

狀態管理

6.4狀態管理.png
6.5測試.png

服務端渲染 (SSR)

6.6服務端渲染 (SSR).png

最佳實踐

生產環境部署

7.1生產環境部署.png
7.2效能.png

無障礙訪問

7.3無障礙訪問.png
7.4安全.png

搭配 TypeScript 使用 Vue

8.1搭配 TypeScript 使用 Vue.png

TypeScript 與組合式 API

8.2TypeScript 與組合式 API.png

TypeScript 與選項式 API

8.3TypeScript 與選項式 API.png

多種方式使用 Vue

9.1多種方式使用 Vue.png

組合式 API FAQ

9.2組合式 API FAQ.png

深入響應式系統

9.3深入響應式系統.png

渲染機制

9.4渲染機制.png

渲染函式 & JSX

9.5渲染函式 & JSX.png

附件

  • 已將上述思維導圖原圖及原  xmind 文件上傳到  github ，如有需要可自行下載：傳送門 [7]

補充說明

看新的中文文件時，可能你會遇到一些問題，比如有些頁面未翻譯等等。不要詫異，因為中文版非正式上線，可能存在問題，截止目前僅集中翻譯了 src\guide 目錄下的文件，正式上線的英文版也還在更新中，所以之後會增加其他穩定頁面的翻譯和校驗，還有很多工作，歡迎一起參與進來

結語

以上是本文的所有內容，如有問題歡迎指正

原文地址

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

「」