VUE3.0入門
一、 VUE3.0介紹
Vue 團隊於 2020 年 9 月 18 日發布了 正式版Vue 3.0 版本，命名為One Piece。
- vue3.0是兼容vue2.0，項目中vue2.x的語法和3.x的語法可以共存。
- 目前使用的element-ui是不支持vue3.0，elementPlus是針對vue3.0出得。(Ant Design、vant3.0)
- vue3.0官宣徹底放棄IE瀏覽器，vue2.7會成為堅持留守IE11人群的選擇。
二、 VUE3.0的優勢
- 更小
(1) 移除一些冷門的API。
如filter、按鍵修飾符（@keyup.13）等。
(2) 引入tree-shaking的技術，減少打包的體積。
tree-shaking是webpack 2 的新特性之一，指的是在打包構建過程中移除沒有被引用到的代碼。這個概念最早在基於 ES6 的打包工具 Rollup 中提出，后來被引入到 webpack 中。
在 Vue 3 中，官方團隊重構了所有全局 API 的組織方式，讓所有的 API 都支持了 tree-shaking。 使用tree-shaking的前提是所有的內容必須用ES6 modules的import，也就是說由webpack打包的代碼必須使用ES module方式去實現模塊化。
- 更快
2.1 編譯優化
(1) diff算法優化
vue2中的虛擬dom是進行全量的對比。
vue3中新增了靜態標記（PatchFlag）。在更新前的節點進行對比的時候，只會去對比帶有靜態標記的節點。並且可以通過flag的信息得知當前節點要對比的具體內容。
例如：有下面一段代碼：
<div>
<p>我是段落</p>
<p> {{msg}} </p>
</div>
Vue 2.0 的全量對比模式下，如下圖所示：
Vue2.0 中，虛擬dom是進行全量的對比，也就是說當數據變化，去重新渲染頁面時，會重新再生成一個DOM樹，生成的過程中會一一比較每個dom節點，但是像div和p的內容是寫死的，並沒有發生變化，還一一去做對比，所以這個操作就冗余了。
Vue3.0 中，對diff算法進行了優化，在創建虛擬DOM時，根據DOM內容是否會發生變化，添加相對應類型的靜態標記，如下圖所示：
在vue3.0 里，只對帶有 flag 標記的標簽進行了對比，所以只進行了 1 次比較，而相同情況下，Vue2 則進行了 3 次比較。這便是 Vue3.0 比 Vue2.0 性能好的第一個原因。
注：關於靜態類型枚舉如下：
(2) hoistStatus靜態提升
Vue2.0 中無論元素是否參與更新,每次都會重新創建,然后再渲染。
Vue3.0 中對不參與更新的元素，會做靜態提升，只會被創建一次，在渲染時直接復用，這樣就免去了重復的創建節點，大型應用會受益於這個改動，免去了重復的創建操作，優化了運行時候的內存占用。
我們可以打開模板轉化網站，對上述代碼進行轉譯：
注：模板轉化代碼的網址 https://vue-next-template-explorer.netlify.app/
沒有做靜態提升之前：
選擇 Option 下的 hoistStatic：
做了靜態提升后：
發現第一個p標簽被提到了 render 函數外，保存到一個全局常量里，那么每次渲染的時候不會再重新創建，可以直接復用以前的。這樣就免去了重復的創建節點，大型應用會受益於這個改動，免去了重復的創建操作，優化了運行時候的內存占用。
(3) cacheHandlers事件監聽緩存
默認情況下@click 事件被認為是動態變量，所以每次更新視圖的時候都會追蹤它的變化。但是正常情況下，我們的@click 事件在視圖渲染前和渲染后，都是同一個事件，基本上不需要去追蹤它的變化，所以Vue3.0對此作出了相應的優化叫事件監聽緩存
例如：有下面一段代碼：
<div>
<p @click="handleClick">測試</p>
</div>
未開啟 cacheHandler：
選擇 Option 下的 hoistStatic：
開啟 cacheHandler：
開啟 cacheHandler 之后，編譯后的代碼已經沒有靜態標記（PatchFlag），也就表明圖中 P 標簽不再被追蹤比較變化，進而提升了 Vue 的性能。
(4) ssr渲染
SSR是 Server-Side Rendering(服務器端渲染)的縮寫。
在開發中使用 SSR 開發時，Vue 3.0 會將靜態標簽直接轉化為文本。
2.2 響應式優化
- 在vue2.x中是通過Object.defineProperty來實現響應式數據的。
Object.defineProperty存在的弊端：
- Object.defineProperty只能劫持對象的屬性，因此我們需要對每個對象的每個屬性進行遍歷，如果屬性值也是對象，那么需要通過遞歸以及遍歷data對象來實現對數據的監控。
- 在vue中，並不是任何時候數據都是雙向綁定的。
- 在vue3.x中是通過Proxy來實現響應式數據的
Vue3使用Proxy能監聽整個對象，這樣可以從底層實現對這個對象進行完全的監控。
-
組合API
優化代碼邏輯組織；優化邏輯復用 -
更好的ts支持
Vue3是基於typeScript編寫的，提供了更好的類型檢查，能支持復雜的類型推導
三、項目搭建
創建vue3項目的兩種方式
- Vue-cli4腳手架搭建
① 安裝node.js
node版本必須在10.0.0以上才支持
② 安裝vue-cli腳手架構建工具
npm install -g @vue/cli
③ 創建項目
vue create 項目名稱
注意：要求vue-cli腳手架版本在4.5以上，否則默認情況下vue3.0無法安裝
2.vite
① 安裝Vite：
npm install -g create-vite-app
② 使用 vite 創建 Vue3 項目：
create-vite-app項目名稱
③ 運行項目：
npm install
npm run dev
注：Vite 是 Vue 作者開發的一款意圖取代 webpack 的開發構建工具。
四、Composition API
composition API是Vue3的核心功能，其兩大顯著的優化：
優化邏輯組織
vue2 Options API：
在vue2中，我們會在一個vue文件中methods，computed，watch，data中等等定義屬性和方法，共同處理頁面邏輯，我們稱這種方式為Options API。、
vue2.0存在的缺點：
每新增一個功能，就需要在data里定義變量，在methouds/computed/watch里面新增功能的業務邏輯。數據在data里面，業務邏輯在methouds/computed/watch里面，數據和業務邏輯分散，不利用代碼的管理和維護。如果要修改一個邏輯點，就要上下來回翻找。
vue3為了解決這個問題，就推出了組合API。相同功能的代碼編寫在一塊，而不像options API那樣，各個功能的代碼混成一塊，組合API就是這樣封裝好的具備獨立功能的函數組合在一起，就是我們的組合API。
優化邏輯復用
在vue2中，我們是通過mixin實現功能混合，如果多個mixin混合，會存在兩個非常明顯的問題：命名沖突和數據來源不清晰。
而通過composition這種形式，可以將一些復用的代碼抽離出來作為一個函數，只要在使用的地方直接進行調用即可。
具體的API函數
- setup()函數
1、簡介
setup函數是vue3中專門為組件提供的新屬性，是組合API的入口函數。
2、執行時機
在beforeCreate()鈎子函數之前執行。
3、返回值
返回一個對象，為模板提供數據，模板中可以直接使用此對象中的所有屬性/方法。
注意：在setup()函數中無法訪問到this
- reactive()函數
1、簡介
reactive()函數是專門用來創建響應式數據,接受的參數是一個普通對象，但是返回的是一個響應式數據對象信息。
2、基本語法
// 按需導入reactive函數
import {reactive } from ‘vue
// 創建響應式數據對象
const state = reactive({
id: 1
})
- ref()函數
1、簡介
ref函數用來根據給定的值創建一個響應式的數據對象。返回值也是一個對象，這個對象只包含一個value屬性。
2、與reactive聲明響應式數據的區別
ref函數傳入的值是一個基本數據類型。
reactive函數傳入的值是一個對象。
3、ref獲取DOM
在setup里，先創建一個響應式數據，當響應式數據被賦值之后，就可以利用生命周期方法，在生命周期方法中獲取對應的響應式數據，即DOM元素，並且要把響應式數據暴露出去。
- 生命周期鈎子函數
beforeCreate 和 created 與 setup 幾乎是同時進行的，所以可以把寫在beforeCreate 和 created 這兩周期的代碼直接寫在 setup 里即可。
命名都形如 onXXX。
beforeDestroy 和 destroyed 改為 onBeforeUnmount 和 onUnmounted ，更語義化了。