一、vue3介紹
1、為什麼要學習vue3？
vue3的變化：
首先vue3完全相容vue2，但是vue3不建議用vue2的寫法；其次，vue3擁抱TypeScript，之前vue2使用的JavaScript，ts完全相容js
最後之前學的vue2 是配置項api，而vue3是組合式api
optionsAPI(舊) => compositionAPI（新）, 效果: 程式碼組織更方便了, 邏輯複用更方便了 非常利於維護!!
vue3新特性：
-
資料響應式原理重新實現 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
-
解決了: 例如陣列的更新檢測等bug, 大大最佳化了響應式監聽的效能 ---覆寫
-
(原來檢測物件屬性的變化, 需要一個個對屬性遞迴監聽) proxy 可以直接對整個物件劫持
-
虛擬DOM - 新演算法 (更快 更小)
-
提供了composition api, 可以更好的邏輯複用
-
模板可以有多個根元素
-
原始碼用 typescript 重寫, 有更好的型別推導 (型別檢測更為嚴格, 更穩定)
-
廢棄了 eventbus 過濾器
官方文件：
- vue3官方文件：Vue.js - The Progressive JavaScript Framework | Vue.js
- vue3中文文件：Vue.js
小結： vue3 效能更高, 體積更小, 更利於複用, 程式碼維護更方便
2、配置項api與組合式api快速體驗
（1）配置項api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style></style>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<br>
<button @click="handleAdd">點我加1</button>
</div>
</body>
<script>
let app=Vue.createApp({
data(){
return {
count:100
}
},
methods:{
handleAdd(){
this.count++
}
}
})
app.mount("#app")
</script>
</html>
（2）組合式api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style></style>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<br>
<button @click="handleAdd">點我加1</button>
</div>
</body>
<script>
let app=Vue.createApp({
setup() {
let count=Vue.ref(0)
let handleAdd=()=>{
count.value++
}
return {
count,
handleAdd
}
},
})
app.mount("#app")
</script>
</html>
（3）API風格
- 選項式API(配置項api)，也就是之前vue2中用的用法
Vue.createApp({
data:function(){},
methods:{}，
watch：{}
# 同一個功能的程式碼，分到不同地方，程式碼越多，越亂
})
- 組合式API，之後vue3中的用法
Vue.createApp({
setup() {
# 所有程式碼寫在這裡面
# 變數，函式，監聽屬性，生命週期
# 同一個功能的程式碼，會在一起
}
})
- 如果當你打算用 Vue 構建完整的單頁應用，推薦採用組合式 API + 單檔案元件
（4）擁抱TypeScript
- 之前學習vue2的時候用的都是js程式碼，在vue3既可以使用js也可以使用ts
- ts是由微軟推出的，但是最終也還是要被編譯成js才能執行在瀏覽器中
- 如果使用ts寫，可以避免很大錯誤，因為ts是js的超集，ts完全相容js，也最佳化了js的一些問題
二、vue3專案建立和啟動
1、 vue-cli建立
- 這種建立方式已經被官方不推薦使用了
- 官方文件：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 檢視@vue/cli版本，確保@vue/cli版本在4.5.0以上
vue --version
## 安裝或者升級你的@vue/cli
npm install -g @vue/cli
## 建立
vue create vue3_demo001
## 啟動
cd vue3_demo001
npm run serve
- 如果沒有配置cnpm的話，也可以配置直接配置npm的映象站，效果是一樣的
# 配置npm映象站
npm config set registry https://registry.npmmirror.com
# 檢視npm映象站
npm config get registry
2、使用vite建立（推薦）
這種方式目前是官方推薦使用的，Vite 官方文件：Vite | 下一代的前端工具鏈
（1）什麼是vite？
Vite（法語意為 "快速的"，發音 /vit/，發音同 "veet"）是一種新型前端構建工具，能夠顯著提升前端開發體驗。它的工作流程與傳統方式不同：
-
傳統方式：webpack啟動專案 -> webpack進行打包編譯->將打包的結果交給瀏覽器 ->瀏覽器執行
- 先抓取並構建你的整個應用，然後才能提供服務。
- 更新速度會隨著應用體積增長而直線下降。
-
vite 方式：vite啟動專案 -> 將打包編譯的工作交給了瀏覽器->瀏覽器直接解析業務
- Vite 以 原生 ESM 方式提供原始碼。這實際上是讓瀏覽器接管了打包程式的部分工作。
- Vite 只需要在瀏覽器請求原始碼時進行轉換並 按需提供原始碼。
- 根據情景動態匯入程式碼，即只在當前螢幕上實際使用時才會被處理。
（2）為什麼使用vite？
優勢：
- 💡 極速的服務啟動，使用原生 ESM 檔案，無需打包
- ⚡️ 輕量快速的熱過載，始終極快的模組熱過載（HMR）
- 🛠️豐富的功能，對 TypeScript、JSX、CSS 等支援開箱即用
- 📦傳統構建 與 vite構建對比圖
（3）使用vite需要注意的地方
相容性注意：Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依賴更高的 Node 版本才能正常執行，當你的包管理器發出警告時，請注意升級你的 Node 版本。
（4）vite建立vue3
① 指定名字建立
- 使用
cnpm create vite vue3_demo001建立完的專案是沒有安裝依賴的，也沒有安裝外掛
- 開啟專案，安裝依賴
cnpm install
- 執行專案
npm run dev或者pycharm配置執行專案
② 不指定名字建立
- 使用
cnpm create vue@latest建立可以自選外掛的vue3專案，但還是不帶依賴
（5）使用vite和vue3建立專案的檔案簡單解釋
- main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 沒有使用第三方外掛
- HelloWorld.vue 組合式api寫法，跟之前不一樣了
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
- 後期我們可以自己引入 vuex，pinia，vue-router，程式碼需要自己寫
- 以後在vue3上，建議使用pinia 做狀態管理，pinia更適合組合式api的寫法，而pinia和vuex是一個功能