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