title: Vue 3入門指南
date: 2024/5/23 19:37:34
updated: 2024/5/23 19:37:34
categories:
- 前端開發
tags:
- 框架對比
- 環境搭建
- 基礎語法
- 元件開發
- 響應式系統
- 狀態管理
- 路由配置
第1章：Vue 3簡介
1.1 Vue.js的歷史與發展
Vue.js由前谷歌工程師尤雨溪（Evan
You）在2014年釋出。它的設計目標是提供一個輕量級、漸進式的JavaScript框架，用於構建使用者介面。Vue的核心庫專注於檢視層，易於上手，同時也便於與第三方庫或既有專案整合。隨著時間的推移，Vue.js因其簡潔的API、靈活的元件系統和高效的效能而受到開發者的廣泛歡迎。
1.2 Vue 3的新特性
Vue 3在2020年釋出，帶來了許多重要的更新和改進：
- Composition API：提供了一種更靈活的方式來組織和重用元件邏輯，特別是在處理複雜元件時。
- 效能提升：透過最佳化虛擬DOM的演算法和編譯時的最佳化，Vue 3在渲染大型應用時更加高效。
- 更好的TypeScript支援：Vue 3的內部架構完全使用TypeScript重寫，提供了更好的型別推斷和整合。
- Fragments：允許元件返回多個根節點，而不需要額外的包裝元素。
- Teleport（傳送門） ：允許將元件的內容渲染到DOM中的不同位置。
- Suspense：一種新的內建元件，用於處理非同步元件的載入狀態。
- 響應式系統的重構：使用Proxy替代了Object.defineProperty，提高了響應式系統的效能和功能。
1.3 Vue 3與其他框架的比較
Vue 3與其他流行的前端框架（如React和Angular）相比，有其獨特的優勢和差異：
- React：React是一個由Facebook開發的庫，以其高效的虛擬DOM演算法和元件化開發模式而聞名。Vue
3提供了更簡單的API和更直觀的模板語法，而React則依賴於JSX。Vue 3的Composition API在某些方面類似於React的Hooks，但提供了更多的靈活性和控制。 - Angular：Angular是一個由Google開發的全功能框架，提供了大量的內建功能，如依賴注入、表單處理和路由。Vue
3相比之下更加輕量級，易於上手，但仍然提供了足夠的工具和庫來構建複雜的應用。Angular的學習曲線較陡峭，而Vue 3則更加平滑。
每個框架都有其適用的場景和優勢，選擇哪個框架通常取決於專案需求、團隊熟悉度和個人偏好。Vue 3因其平衡的效能、靈活性和易用性，成為了許多開發者的首選。
第2章：環境搭建與專案初始化
2.1 安裝Node.js和npm
Node.js是一個開源的JavaScript執行環境，它允許在伺服器端執行JavaScript程式碼。npm（Node Package
Manager）是隨Node.js一同釋出的包管理器，用於安裝和管理JavaScript專案的依賴。如果你尚未安裝，可以訪問官方網站（https://nodejs.org/）下載適合你作業系統的安裝包。安裝完成後，可以透過命令列驗證Node.js和npm是否已安裝：
node -v # 顯示Node.js版本
npm -v # 顯示npm版本
2.2 安裝Vue CLI
Vue CLI（Vue Create App）是Vue.js官方推薦的專案初始化工具，它能快速建立並配置Vue 3專案。在終端或命令提示符中，執行以下命令安裝Vue
CLI全球：
npm install -g @vue/cli
或者使用yarn：
yarn global add @vue/cli
安裝完成後，可以使用vue create命令建立新專案。
2.3 建立Vue 3專案
建立新專案時，可以使用以下命令，其中my-project是你的專案名：
vue create my-project
它會詢問你選擇哪些特性，如是否包含路由、Vuex和測試等。選擇完成後，Vue CLI會自動下載並配置專案。
2.4 專案結構概覽
Vue CLI生成的專案結構通常包含以下主要部分：
-
src/：原始碼目錄，包含應用的核心邏輯和元件。main.js：入口檔案，啟動應用。components/：存放應用的元件。views/（或pages/）：存放應用的主要檢視或頁面。router/：存放應用的路由配置。
-
public/：靜態資源目錄，如HTML、CSS和JavaScript檔案。 -
package.json：專案依賴和配置資訊。 -
.env（或.env.production）：環境變數配置檔案。 -
vue.config.js：自定義配置檔案，用於調整構建設定。
在開發過程中，你可以根據需要新增、修改或刪除這個結構中的檔案和目錄。Vue CLI會根據這些結構生成構建過程，確保專案的可維護性和擴充套件性。
第3章：Vue 3基礎
3.1 Vue例項與生命週期
在Vue中，每個應用都是透過建立Vue例項來啟動的。Vue例項是Vue應用的根元件，它包含了資料、模板、掛載元素、方法、生命週期鉤子等選項。生命週期鉤子是Vue例項在建立、更新和銷燬過程中自動呼叫的函式，允許你在特定階段執行自定義邏輯。
例如，created鉤子在例項被建立後立即呼叫，而mounted鉤子在例項掛載到DOM後呼叫。
new Vue({
data: {
message: 'Hello Vue!'
},
created() {
console.log('例項建立完成');
},
mounted() {
console.log('例項已掛載到DOM');
}
});
3.2 模板語法
Vue使用基於HTML的模板語法，允許開發者宣告式地將DOM繫結到底層Vue例項的資料。Vue模板是語法層面的純粹HTML，會被Vue解析器解析為渲染函式，生成虛擬DOM並最終渲染成真實DOM。
<div id="app">
{{ message }}
</div>
3.3 資料繫結與響應式原理
Vue的核心特性之一是響應式資料繫結。當例項的資料發生變化時，檢視會自動更新。這是透過使用ES5的Object.defineProperty
方法將資料屬性轉換為getter/setter來實現的。
new Vue({
data: {
message: 'Hello Vue!'
}
});
3.4 計算屬性與偵聽器
計算屬性是基於它們的依賴進行快取的，只有在相關依賴發生改變時才會重新求值。這使得計算屬性在處理複雜邏輯時比普通方法更高效。
new Vue({
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
});
偵聽器（watch）用於觀察和響應Vue例項上的資料變動。當你有一些資料需要隨著其他資料變動而變動時，使用偵聽器非常合適。
new Vue({
data: {
message: 'Hello Vue!'
},
watch: {
message(newVal, oldVal) {
console.log('Message changed:', newVal, oldVal);
}
}
});
3.5 條件渲染與列表渲染
Vue提供了v-if、v-else和v-show指令來控制元素的顯示與隱藏。v-if在條件變化時會完全移除或插入元素，而v-show
只是簡單地切換元素的CSS屬性display。
<div v-if="seen">現在你看到我了</div>
<div v-show="seen">現在你看到我了</div>
列表渲染透過v-for指令實現，它可以遍歷陣列、物件甚至整數。
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
3.6 事件處理
Vue使用v-on指令（簡寫為@）來監聽DOM事件，並在觸發時執行一些JavaScript程式碼。
<button v-on:click="counter += 1">增加 1</button>
3.7 表單輸入繫結
Vue提供了v-model指令，用於在表單控制元件（如<input>、<textarea>和<select>）和Vue例項的資料之間建立雙向資料繫結。
<input v-model="message" placeholder="編輯我">
<p>Message is: {{ message }}</p>
這些基礎知識是理解和使用Vue 3進行開發的關鍵。透過這些概念和工具，你可以開始構建功能豐富的Vue應用。
第4章：元件化開發
4.1 元件基礎
在Vue中，元件是可複用的Vue例項。元件可以擁有自己的資料、方法、生命週期鉤子等，並且可以被其他元件包含或巢狀。元件透過<component>
標籤或在模板中直接使用元件的標籤來使用。
<my-component></my-component>
在Vue 3中，元件的定義使用defineComponent函式，這提供了一種型別安全的定義方式。
const MyComponent = defineComponent({
data() {
return {
message: 'Hello'
};
},
template: '
<div>{{ message }}</div>'
});
4.2 元件通訊
Vue元件之間的通訊有多種方式，包括父子元件透過props和事件通訊，以及祖先與後代元件間的通訊透過provide / inject或事件匯流排。
父子元件透過props傳遞資料，子元件可以透過事件向父元件傳送訊息。
<child-component :parent-message="message" @child-event="handleChildEvent"></child-component>
4.3 插槽（Slots）
插槽允許開發者向元件的模板中插入內容。插槽的內容會被插入到元件的<slot>標籤中。
<template>
<div>
<slot></slot>
</div>
</template>
使用插槽時，你可以為插槽提供預設內容，如果元件的使用者沒有提供內容，則預設內容會顯示。
<template>
<div>
<slot>預設內容</slot>
</div>
</template>
4.4 動態元件與非同步元件
動態元件允許你在執行時根據條件切換元件。透過<component>標籤的is屬性，你可以指定當前要顯示的元件。
<component :is="currentComponent"></component>
非同步元件則是先載入元件的定義，而不是立即渲染。這在載入較大或者可能不存在的元件時非常有用。
const AsyncComponent = defineAsyncComponent(() =>
import('./MyComponent.vue')
);
第5章：Vue 3的響應式系統與Composition API
5.1 響應式基礎
Vue 3的響應式系統是基於資料劫持和依賴收集機制。當資料發生變化時，Vue會自動更新檢視。這主要依賴於reactive和ref。
5.2 Composition API簡介
Composition API是Vue 3引入的新的程式設計模型，它透過函數語言程式設計的方式，將元件的邏輯分解為一系列函式，如setup、onMounted
等，而不是傳統的created、mounted這樣的生命週期鉤子。這使得程式碼更易於理解和測試。
5.3 使用ref和reactive建立響應式資料
ref：用於建立響應式的變數，它返回一個物件，包含當前值和value屬性，可以用來直接修改值。
const count = ref(0);
count.value = 10; // 監聽count的變化
reactive：用於建立響應式物件，物件的所有屬性都會被追蹤。
const obj = reactive({count: 0});
obj.count = 10; // 監聽obj.count的變化
5.4 使用computed和watch
computed：用於建立計算屬性，它會根據依賴的值自動計算並返回結果，且只在依賴值改變時重新計算。
const doubleCount = computed(() => obj.count * 2);
watch：用於監聽資料變化，可以執行特定的函式，但它不會自動響應資料的改變。
watch(obj.count, (newCount) => {
console.log('Count changed:', newCount);
});
5.5 生命週期鉤子與Composition API
在Composition API中，生命週期鉤子被替換為更靈活的函式，如setup、onMounted、onUnmounted等。這些函式在元件例項建立、掛載、解除安裝時執行。
setup()
{
const count = ref(0);
onMounted(() => {
// 在元件掛載後執行
});
}
5.6 自定義Hooks
雖然Vue官方推薦使用Composition API，但你也可以自定義類似Hook的函式來組織程式碼，但這些不是官方提供的API，而是開發者實踐中的常見做法。
function useCount(initialValue) {
const count = ref(initialValue);
// ...
return {count};
}
在使用時：
const {count} = useCount(0);
這有助於將元件邏輯分解為更小、更可複用的部分。
第6章：高階特性
6.1 渲染函式與JSX
渲染函式是一種用於渲染Vue元件的替代方法，它允許你在JavaScript函式中直接定義元件的渲染輸出。JSX是一種在JavaScript中編寫HTML的語法，可以更方便地編寫渲染函式。
6.2 自定義指令
自定義指令是Vue中定義的一種底層的擴充套件機制，可以用來在元件中對普通DOM元素進行低階別操作。
6.3 過渡與動畫
Vue提供了一系列內建的過渡和動畫效果，包括transition、transition-group等。可以使用CSS或JavaScript來實現過渡和動畫效果。
6.4 混入（Mixins）
混入是一種在元件之間複用程式碼的方式，它允許在多個元件中重用一組相同的選項。混入可以包含資料、方法、生命週期鉤子等，但需要注意有時候可能會導致資料衝突。
6.5 外掛開發
外掛是一種Vue的擴充套件機制，它可以在Vue的建構函式上新增全域性方法、指令、過濾器等。開發外掛需要遵循一定的規範，如提供一個安裝函式，並在安裝時呼叫Vue例項的use
方法。
const MyPlugin = {
install(Vue) {
Vue.directive('my-directive', {
bind(el, binding, vnode) {
// ...
}
});
}
};
Vue.use(MyPlugin);
第7章：狀態管理與Vuex
7.1 Vuex簡介
Vuex是一個專為Vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
7.2 安裝與配置Vuex
要使用Vuex，首先需要透過npm或yarn安裝Vuex庫。安裝完成後，在Vue專案中建立一個Vuex例項，並將其作為外掛安裝到Vue應用中。
npm install vuex --save
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
// 狀態、getters、mutations和actions配置
});
new Vue({
el: '#app',
store,
// ...
});
7.3 State、Getters、Mutations和Actions
- State：儲存應用狀態的物件。
- Getters：從state中派生出一些狀態，類似於計算屬性。
- Mutations：更改state中狀態的唯一方法，必須是同步函式。
- Actions：類似於mutations，但可以包含任意非同步操作，並透過提交mutations來改變狀態。
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
doubleCount(state) {
return state.count * 2;
}
},
mutations: {
increment(state) {
state.count++;
}
},
actions: {
incrementAsync({commit}) {
setTimeout(() => {
commit('increment');
}, 1000);
}
}
});
7.4 Modules
當應用變得複雜時，可以將store分割成模組（modules）。每個模組擁有自己的state、getters、mutations和actions。
const moduleA = {
state: {...},
getters: {...},
mutations: {...},
actions: {...}
};
const store = new Vuex.Store({
modules: {
a: moduleA
}
});
7.5 Vuex與Composition API
Vuex與Vue 3的Composition API可以很好地結合使用。使用setup函式時，可以透過useStore函式來訪問Vuex store。
import {useStore} from 'vuex';
export default {
setup() {
const store = useStore();
// 使用store
}
};
Vuex提供了一種集中式儲存管理應用狀態的方式，使得狀態的變化可以被追蹤，並且可以方便地在元件之間共享狀態。透過合理地使用Vuex，可以提高應用的可維護性和可擴充套件性。
第8章：Vue Router
8.1 Vue Router簡介
Vue Router是Vue.js官方的路由管理器。它與Vue.js的核心深度整合，讓構建單頁面應用變得易如反掌。
8.2 安裝與配置Vue Router
要使用Vue Router，首先需要透過npm或yarn安裝Vue Router庫。安裝完成後，在Vue專案中建立一個路由器例項，並將其安裝到Vue應用中。
npm install vue-router --save
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const router = new VueRouter({
// 路由配置
});
new Vue({
el: '#app',
router,
// ...
});
8.3 路由配置
在路由器例項中，可以配置多個路由，每個路由都對應一個元件。
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: HomeView
},
{
path: '/about',
name: 'About',
component: AboutView
}
]
});
8.4 導航守衛
導航守衛主要用於過濾不符合條件的導航，或者在導航前後執行一些操作。
- 全域性前置守衛：在路由導航發生之前呼叫，可以透過
beforeEach函式進行配置。
const router = new VueRouter({
// ...
});
router.beforeEach((to, from, next) => {
// ...
});
- 路由獨享守衛：在路由配置中，透過
beforeEnter函式進行配置。
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: HomeView,
beforeEnter: (to, from, next) => {
// ...
}
}
]
});
- 元件內守衛：在元件內，透過
beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave函式進行配置。
export default {
beforeRouteEnter(to, from, next) {
// ...
},
beforeRouteUpdate(to, from, next) {
// ...
},
beforeRouteLeave(to, from, next) {
// ...
}
};
8.5 路由懶載入
在路由配置中，可以使用動態匯入（import）語法，將元件按需載入，以實現路由懶載入。
const router = new VueRouter({
routes: [
{
path: '/',
name: 'Home',
component: () => import('@/views/HomeView.vue')
}
]
});
路由器提供了一種強大的方式，用於管理應用的導航和狀態。透過合理地使用Vue Router，可以提高應用的效能和可維護性。
第9章：構建與部署
9.1 使用Vue CLI進行構建
Vue CLI是Vue.js的官方構建工具，提供了一系列的工具和功能，用於構建生產環境的Vue應用。
要使用Vue CLI構建生產環境的Vue應用，需要執行以下步驟：
- 在應用的根目錄下，執行
npm run build命令。 - 構建後的檔案將位於
dist目錄下。 - 將
dist目錄中的檔案部署到伺服器上。
9.2 分析與最佳化生產構建
在構建生產環境的Vue應用時，可以使用Vue CLI提供的分析報告，來分析應用的構建情況。
- 在應用的根目錄下，執行
npm run build --report命令。 - 在
dist目錄下會生成一個report.html檔案，該檔案包含了應用的構建報告。 - 根據報告中的資訊，可以對構建進行最佳化。
9.3 部署Vue應用
在構建完成後，可以將dist目錄中的檔案部署到伺服器上。部署方式取決於伺服器的型別和配置，常見的部署方式包括：
- 靜態伺服器：將
dist目錄中的檔案直接放到靜態伺服器上，例如Nginx或Apache。 - Node.js伺服器：將
dist目錄中的檔案放到Node.js伺服器上，並使用express.static中介軟體進行服務。
const express = require('express');
const app = express();
app.use(express.static('dist'));
app.listen(3000, () => {
console.log('Server listening on port 3000!');
});
- 雲伺服器：將
dist目錄中的檔案放到雲伺服器上，例如AWS S3、Azure Blob Storage或Google Cloud Storage。
在部署Vue應用時，需要注意以下問題：
- URL路徑：確保伺服器的URL路徑與應用的構建路徑一致，以避免資源載入失敗。
- SSL證書：確保伺服器使用正確的SSL證書，以確保應用的安全性。
- CDN加速：使用CDN加速，可以提高應用的載入速度。