vue3 遷移指南 - 介紹（未完）

原文地址 v3.cn.vuejs.org

# 值得注意的新特性

Vue 3 中需要關注的一些新功能包括：

• 組合式 API
• Teleport
• 片段
• 觸發組件選項
• 來自 @vue/runtime-core 的 createRenderer API(opens new window) 創建自定義渲染器
• 單文件組件組合式 API 語法糖 (<script setup>)(opens new window) 實驗性
• 單文件組件狀態驅動的 CSS 變量 (<style vars>)(opens new window) 實驗性
• 單文件組件 <style scoped> 現在可以包含全局規則或只針對插槽內容的規則 (opens new window)

# 非兼容的變更

提示

我們仍在開發 Vue 3 的專用遷移版本，該版本的行為與 Vue 2 兼容，運行時警告不兼容。如果你計划遷移一個非常重要的 Vue 2 應用程序，我們強烈建議你等待遷移版本完成以獲得更流暢的體驗。

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

# 全局 API

• 全局 Vue API 已更改為使用應用程序實例

注釋：全局 API，是指原來綁定在 vue 下的方法和屬性，例如 vue.mixin。這種方式雖然便於全局修改每一個由該 vue 創建的實例，但是卻污染了單元測試的環境

• 全局和內部 API 已經被重構為可 tree-shakable（樹搖）

注釋：全局API支持樹搖，即在未使用時不會被打包工具打包

# 模板指令

• 組件上 v-model 用法已更改，替換 v-bind.sync

注釋：v-model 修改了使用方法，用以替換 v-bind.sync 的實現

• <template v-for> 和非 v-for 節點上 key 用法已更改

注釋：對於 v-if/v-else/v-else-if 的各分支項 key 將不再是必須的（過去似乎也不是必須的），<template v-for> 的 key 應該設置在 <template> 標簽上，如果你手動提供 key，那么每個分支必須使用唯一的 key。你不能通過故意使用相同的 key 來強制重用分支。

• 在同一元素上使用的 v-if 和 v-for 優先級已更改

注釋：vue2 中 v-for 的優先級高於 v-if

• v-bind="object" 現在排序敏感

注釋：vue2 中對單個 property 的綁定會覆蓋 v-bind:Object 的方式，vue3 中根據綁定順序決定覆蓋行為

• v-on:event.native 修飾符已移除

注釋：新增的 emits 選項允許子組件定義會被組件觸發的事件，未被定義為組件觸發的所有事件監聽器，Vue 現在將把它們作為原生事件監聽器添加到子組件的根元素中 (除非在子組件的選項中設置了 inheritAttrs: false)。

• v-for 中的 ref 不再注冊 ref 數組

注釋：vue2 中，在模板語法中使用 v-for 和 ref 是，對同名 ref 會生成數組。在 render 函數中，需要手動傳入 refInFor={true} 來實現。
注釋：vue3 中，ref 允許綁定一個函數，接收每個綁定的 dom 作為參數

# 組件

• 只能使用普通函數創建功能組件
• functional 屬性在單文件組件 (SFC) <template> 和 functional 組件選項被拋棄
• 異步組件現在需要 defineAsyncComponent 方法來創建
• 組件事件現在需要在 emits 選項中聲明

# 渲染函數

• 渲染函數 API 改變
• $scopedSlots property 已刪除，所有插槽都通過 $slots 作為函數暴露
• $listeners 被移除或整合到 $attrs
• $attrs 現在包含 class and style attribute

# 自定義元素

• 自定義元素白名單現在已經在編譯時執行
• 對特殊的 is prop 的使用只嚴格限制在被保留的 <component> 標記中

# 其他小改變

• destroyed 生命周期選項被重命名為 unmounted
• beforeDestroy 生命周期選項被重命名為 beforeUnmount
• default prop 工廠函數不再可以訪問 this 上下文
• 自定義指令 API 已更改為與組件生命周期一致
• data 選項應始終被聲明為一個函數
• 來自 mixin 的 data 選項現在為淺合並
• Attribute 強制策略已更改
• 一些過渡 class 被重命名
• <TransitionGroup> 不再默認渲染包裹元素
• 當偵聽一個數組時，只有當數組被替換時，回調才會觸發，如果需要在變更時觸發，則需要指定 deep 選項
• 沒有特殊指令的標記 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 現在被視為普通元素，並將生成原生的 <template> 元素，而不是渲染其內部內容。
• 在 Vue 2.x 中，應用根容器的 outerHTML 將替換為根組件模板 (如果根組件沒有模板 / 渲染選項，則最終編譯為模板)。Vue 3.x 現在使用應用容器的 innerHTML，這意味着容器本身不再被視為模板的一部分。

# 移除 API

• keyCode 支持作為 v-on 的修飾符
• $on，$off 和 $once 實例方法
• 過濾
• 內聯模板 attribute
• $children 實例 property
• $destroy 實例方法。用戶不應再手動管理單個 Vue 組件的生命周期。

# 官方支持的庫

我們所有的官方庫和工具現在都支持 Vue 3，但大多數仍然處於 beta 狀態，並在 npm 的 next dist 標簽下發布。我們正計划在 2020 年底前穩定所有項目，並將其轉換為使用 latest 的 dist 標簽。

# Vue CLI

從 v4.5.0 開始，vue-cli 現在提供了內置選項，可在創建新項目時選擇 Vue 3。現在可以升級 vue-cli 並運行 vue create 來創建 Vue 3 項目。

• 文檔 (opens new window)
• GitHub(opens new window)

# Vue Router

Vue Router 4.0 提供了 Vue 3 支持，並有許多突破性的變化，查看遷移指南 (opens new window) 獲取完整的細節。

• 文檔 (opens new window)
• Github(opens new window)
• RFCs(opens new window)

# Vuex

Vuex 4.0 提供了 Vue 3 支持，其 API 與 3.x 基本相同。唯一的突破性變化是插件的安裝方式 (opens new window) 。

• 文檔 (opens new window)
• Github(opens new window)

# Devtools Extension

我們正在開發一個新版本的 Devtools，它有一個新的 UI 和經過重構的內部結構，以支持多個 Vue 版本。新版本目前處於測試階段，目前只支持 Vue 3。Vuex 和路由器的集成也在進行中。

• Chrome：從 Chrome web 商店中安裝 (opens new window)

  • 提示：beta 版本可能與 devtools 的穩定版本沖突，因此你可能需要暫時禁用穩定版本，以便 beta 版本正常工作。

• Firefox：下載簽名擴展 (opens new window) (assets 下的 .xpi 文件)

# IDE 支持

推薦使用 VSCode(opens new window) 和我們官方拓展 [(opens new window)](https://marketplace.visualstudio.com/items?item>Vetur<svg xmlns=) ，它為 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 ]