Vue 3.0 介紹

INFO

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

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

• 快速開始
• 值得注意的新特性
• 重大改變
• 支持的庫

#概覽

點擊此處實現(xiàn)

開始學(xué)習 Vue 3 Vue Mastery。

#快速開始

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

• 通過 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ā)組件選項
• createRenderer API 來自 @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 應(yīng)用程序，我們強烈建議你等待遷移版本完成以獲得更流暢的體驗。

下面列出了從 2.x 開始的重大更改：

#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é)點上 key 用法已更改
• 在同一元素上使用的 v-if 和 v-for 優(yōu)先級已更改
• v-bind="object" 現(xiàn)在排序敏感
• v-for 中的 ref 不再注冊 ref 數(shù)組

#組件

• 只能使用普通函數(shù)創(chuàng)建功能組件
• functional 屬性在單文件組件 (SFC) <template> 已被移除
• 異步組件現(xiàn)在需要 defineAsyncComponent 方法來創(chuàng)建

#渲染函數(shù)

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

#其他小改變

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

#移除 API

• keyCode 支持作為 v-on 的修飾符
• $on，$off 和 $once 實例方法
• 過濾
• 內(nèi)聯(lián)模板 attribute
• $destroy 實例方法。用戶不應(yīng)再手動管理單個 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 預(yù)設(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]