新聞中心
INFO

剛接觸 Vue.js?先從基礎(chǔ)指南開始吧。
本指南主要是為有 Vue 2 經(jīng)驗(yàn)的用戶希望了解 Vue 3 的新功能和更改而提供的。在試用 Vue 3 之前,你不必從頭閱讀這些內(nèi)容。雖然看起來有很多變化,但很多你已經(jīng)了解和喜歡 Vue 的部分仍是一樣的。不過我們希望盡可能全面,并為每處變化提供詳細(xì)的例子。
- 快速開始
- 值得注意的新特性
- 重大改變
- 支持的庫
#概覽
點(diǎn)擊此處實(shí)現(xiàn)
開始學(xué)習(xí) Vue 3 Vue Mastery。
#快速開始
- 通過 CDN:
- 通過 Codepen 的瀏覽器 playground
- 腳手架 Vite:
npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3
- 腳手架 vue-cli:
npm install -g @vue/cli # OR yarn global add @vue/cli
vue create hello-vue3
# select vue 3 preset
#值得注意的新特性
Vue 3 中需要關(guān)注的一些新功能包括:
- 組合式 API
- Teleport
- 片段
- 觸發(fā)組件選項(xiàng)
createRendererAPI 來自@vue/runtime-core創(chuàng)建自定義渲染器- 單文件組件組合式 API 語法糖 (``) 實(shí)驗(yàn)性
- 單文件組件狀態(tài)驅(qū)動(dòng)的 CSS 變量 (``) 實(shí)驗(yàn)性
- 單文件組件 `` 現(xiàn)在可以包含全局規(guī)則或只針對(duì)插槽內(nèi)容的規(guī)則
#非兼容的變更
提示
我們?nèi)栽陂_發(fā) Vue 3 的專用遷移版本,該版本的行為與 Vue 2 兼容,運(yùn)行時(shí)警告不兼容。如果你計(jì)劃遷移一個(gè)非常重要的 Vue 2 應(yīng)用程序,我們強(qiáng)烈建議你等待遷移版本完成以獲得更流暢的體驗(yàn)。
下面列出了從 2.x 開始的重大更改:
#Global API
- 全局 Vue API 已更改為使用應(yīng)用程序?qū)嵗?/li>
- 全局和內(nèi)部 API 已經(jīng)被重構(gòu)為可 tree-shakable
#模板指令
- 組件上
v-model用法已更改 v-for和非 - v-for 節(jié)點(diǎn)上 key 用法已更改- 在同一元素上使用的
v-if和v-for優(yōu)先級(jí)已更改 v-bind="object"現(xiàn)在排序敏感v-for中的ref不再注冊(cè) ref 數(shù)組
#組件
- 只能使用普通函數(shù)創(chuàng)建功能組件
functional屬性在單文件組件 (SFC)已被移除- 異步組件現(xiàn)在需要
defineAsyncComponent方法來創(chuàng)建
#渲染函數(shù)
- 渲染函數(shù) API 改變
$scopedSlotsproperty 已刪除,所有插槽都通過$slots作為函數(shù)暴露- 自定義指令 API 已更改為與組件生命周期一致
- 一些轉(zhuǎn)換 class 被重命名了:
v-enter->v-enter-fromv-leave->v-leave-from
- 組件 watch 選項(xiàng)和實(shí)例方法
$watch不再支持點(diǎn)分隔字符串路徑,請(qǐng)改用計(jì)算函數(shù)作為參數(shù) - 在 Vue 2.x 中,應(yīng)用根容器的
outerHTML將替換為根組件模板 (如果根組件沒有模板/渲染選項(xiàng),則最終編譯為模板)。VUE3.x 現(xiàn)在使用應(yīng)用程序容器的innerHTML。
#其他小改變
destroyed生命周期選項(xiàng)被重命名為unmountedbeforeDestroy生命周期選項(xiàng)被重命名為beforeUnmount- prop
default工廠函數(shù)不再有權(quán)訪問this是上下文 - 自定義指令 API 已更改為與組件生命周期一致
data應(yīng)始終聲明為函數(shù)- 來自 mixin 的
data選項(xiàng)現(xiàn)在可簡單地合并 - attribute 強(qiáng)制策略已更改
- 一些過渡 class 被重命名
- 組建 watch 選項(xiàng)和實(shí)例方法
$watch不再支持以點(diǎn)分隔的字符串路徑。請(qǐng)改用計(jì)算屬性函數(shù)作為參數(shù)。 沒有特殊指令的標(biāo)記 (v-if/else-if/else、v-for或v-slot) 現(xiàn)在被視為普通元素,并將生成原生的元素,而不是渲染其內(nèi)部內(nèi)容。- 在 Vue 2.x 中,應(yīng)用根容器的
outerHTML將替換為根組件模板 (如果根組件沒有模板/渲染選項(xiàng),則最終編譯為模板)。Vue 3.x 現(xiàn)在使用應(yīng)用容器的innerHTML,這意味著容器本身不再被視為模板的一部分。
#移除 API
keyCode支持作為v-on的修飾符- $on,$off 和 $once 實(shí)例方法
- 過濾
- 內(nèi)聯(lián)模板 attribute
$destroy實(shí)例方法。用戶不應(yīng)再手動(dòng)管理單個(gè) Vue 組件的生命周期。
#支持的庫
我們所有的官方庫和工具現(xiàn)在都支持 Vue 3,但大多數(shù)仍然處于 beta 狀態(tài),并在 npm 的 next dist 標(biāo)簽下發(fā)布。我們正計(jì)劃在 2020 年底前穩(wěn)定所有項(xiàng)目,并將其轉(zhuǎn)換為使用 latest 的 dist 標(biāo)簽。
#Vue CLI
從 v4.5.0 開始,vue-cli 現(xiàn)在提供了內(nèi)置選項(xiàng),可在創(chuàng)建新項(xiàng)目時(shí)選擇 Vue 3 預(yù)設(shè)?,F(xiàn)在可以升級(jí) vue-cli 并運(yùn)行 vue create 來創(chuàng)建 Vue 3 項(xiàng)目。
#Vue Router
Vue Router 4.0 提供了 Vue 3 支持,并有許多突破性的變化,查看 README 中完整的細(xì)節(jié),
- Github
- RFCs
#Vuex
Vuex 4.0 提供了 Vue 3 支持,其 API 與 3.x 基本相同。唯一的突破性變化是插件的安裝方式。
- Github
#Devtools Extension
我們正在開發(fā)一個(gè)新版本的 Devtools,它有一個(gè)新的 UI 和經(jīng)過重構(gòu)的內(nèi)部結(jié)構(gòu),以支持多個(gè) Vue 版本。新版本目前處于測(cè)試階段,目前只支持 Vue 3。Vuex 和路由器的集成也在進(jìn)行中。
- Chrome:從 Chrome web 商店中安裝
- 提示:beta 版本可能與 devtools 的穩(wěn)定版本沖突,因此你可能需要暫時(shí)禁用穩(wěn)定版本,以便 beta 版本正常工作。
- Firefox:下載簽名擴(kuò)展 (assets 下的
.xpi文件)
#IDE 支持
推薦使用 VSCode 和我們官方拓展 Vetur,它為 Vue 3 提供了全面的 IDE 支持
#其他項(xiàng)目
| 項(xiàng)目 | npm | 倉庫 |
|---|---|---|
| @vue/babel-plugin-jsx | [Github] | |
| eslint-plugin-vue | [Github] | |
| @vue/test-utils | [Github] | |
| vue-class-component | [Github] | |
| vue-loader | [Github] | |
| rollup-plugin-vue | [Github] |
分享題目:創(chuàng)新互聯(lián)VUE3教程:Vue3.0介紹
文章分享:http://m.fisionsoft.com.cn/article/ccdehhd.html


咨詢
建站咨詢
