Vue 3.0 介紹

INFO

剛接觸 Vue.js？先從基礎(chǔ)指南開(kāi)始吧。

本指南主要是為有 Vue 2 經(jīng)驗(yàn)的用戶希望了解 Vue 3 的新功能和更改而提供的。在試用 Vue 3 之前，你不必從頭閱讀這些內(nèi)容。雖然看起來(lái)有很多變化，但很多你已經(jīng)了解和喜歡 Vue 的部分仍是一樣的。不過(guò)我們希望盡可能全面，并為每處變化提供詳細(xì)的例子。

• 快速開(kāi)始
• 值得注意的新特性
• 重大改變
• 支持的庫(kù)

#概覽

點(diǎn)擊此處實(shí)現(xiàn)

開(kāi)始學(xué)習(xí) Vue 3 Vue Mastery。

#快速開(kāi)始

• 通過(guò) CDN：<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>

• 通過(guò) 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)
• createRenderer API 來(lái)自 @vue/runtime-core 創(chuàng)建自定義渲染器
• 單文件組件組合式 API 語(yǔ)法糖 (``) 實(shí)驗(yàn)性
• 單文件組件狀態(tài)驅(qū)動(dòng)的 CSS 變量 (``) 實(shí)驗(yàn)性
• 單文件組件 `` 現(xiàn)在可以包含全局規(guī)則或只針對(duì)插槽內(nèi)容的規(guī)則

#非兼容的變更

提示

我們?nèi)栽陂_(kāi)發(fā) Vue 3 的專用遷移版本，該版本的行為與 Vue 2 兼容，運(yùn)行時(shí)警告不兼容。如果你計(jì)劃遷移一個(gè)非常重要的 Vue 2 應(yīng)用程序，我們強(qiáng)烈建議你等待遷移版本完成以獲得更流暢的體驗(yàn)。

下面列出了從 2.x 開(kāi)始的重大更改：

#Global API

• 全局 Vue API 已更改為使用應(yīng)用程序?qū)嵗?/a>
• 全局和內(nèi)部 API 已經(jīng)被重構(gòu)為可 tree-shakable

#模板指令

• 組件上 v-model 用法已更改
• <template>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) <template> 已被移除
• 異步組件現(xiàn)在需要 defineAsyncComponent 方法來(lái)創(chuàng)建

#渲染函數(shù)

• 渲染函數(shù) API 改變
• $scopedSlots property 已刪除，所有插槽都通過(guò) $slots 作為函數(shù)暴露
• 自定義指令 API 已更改為與組件生命周期一致
• 一些轉(zhuǎn)換 class 被重命名了：
  • v-enter -> v-enter-from
  • v-leave -> v-leave-from
• 組件 watch 選項(xiàng)和實(shí)例方法 $watch 不再支持點(diǎn)分隔字符串路徑，請(qǐng)改用計(jì)算函數(shù)作為參數(shù)
• 在 Vue 2.x 中，應(yīng)用根容器的 outerHTML 將替換為根組件模板 (如果根組件沒(méi)有模板/渲染選項(xiàng)，則最終編譯為模板)。VUE3.x 現(xiàn)在使用應(yīng)用程序容器的 innerHTML。

#其他小改變

• destroyed 生命周期選項(xiàng)被重命名為 unmounted
• beforeDestroy 生命周期選項(xiàng)被重命名為 beforeUnmount
• prop default 工廠函數(shù)不再有權(quán)訪問(wèn) this 是上下文
• 自定義指令 API 已更改為與組件生命周期一致
• data 應(yīng)始終聲明為函數(shù)
• 來(lái)自 mixin 的 data 選項(xiàng)現(xiàn)在可簡(jiǎn)單地合并
• attribute 強(qiáng)制策略已更改
• 一些過(guò)渡 class 被重命名
• 組建 watch 選項(xiàng)和實(shí)例方法 $watch 不再支持以點(diǎn)分隔的字符串路徑。請(qǐng)改用計(jì)算屬性函數(shù)作為參數(shù)。
• <template> 沒(méi)有特殊指令的標(biāo)記 (v-if/else-if/else、v-for 或 v-slot) 現(xiàn)在被視為普通元素，并將生成原生的 <template> 元素，而不是渲染其內(nèi)部?jī)?nèi)容。
• 在 Vue 2.x 中，應(yīng)用根容器的 outerHTML 將替換為根組件模板 (如果根組件沒(méi)有模板/渲染選項(xiàng)，則最終編譯為模板)。Vue 3.x 現(xiàn)在使用應(yīng)用容器的 innerHTML，這意味著容器本身不再被視為模板的一部分。

#移除 API

• keyCode 支持作為 v-on 的修飾符
• $on，$off 和 $once 實(shí)例方法
• 過(guò)濾
• 內(nèi)聯(lián)模板 attribute
• $destroy 實(shí)例方法。用戶不應(yīng)再手動(dòng)管理單個(gè) Vue 組件的生命周期。

#支持的庫(kù)

我們所有的官方庫(kù)和工具現(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 開(kāi)始，vue-cli 現(xiàn)在提供了內(nèi)置選項(xiàng)，可在創(chuàng)建新項(xiàng)目時(shí)選擇 Vue 3 預(yù)設(shè)。現(xiàn)在可以升級(jí) vue-cli 并運(yùn)行 vue create 來(lái)創(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

我們正在開(kāi)發(fā)一個(gè)新版本的 Devtools，它有一個(gè)新的 UI 和經(jīng)過(guò)重構(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	倉(cāng)庫(kù)
@vue/babel-plugin-jsx		[Github]
eslint-plugin-vue		[Github]
@vue/test-utils		[Github]
vue-class-component		[Github]
vue-loader		[Github]
rollup-plugin-vue		[Github]