---

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應用，需要執行以下步驟：

1. 在應用的根目錄下，運行npm run build命令。
2. 構建后的文件將位于dist目錄下。
3. 將dist目錄中的文件部署到服務器上。

9.2 分析與優化生產構建

在構建生產環境的Vue應用時，可以使用Vue CLI提供的分析報告，來分析應用的構建情況。

1. 在應用的根目錄下，運行npm run build --report命令。
2. 在dist目錄下會生成一個report.html文件，該文件包含了應用的構建報告。
3. 根據報告中的信息，可以對構建進行優化。

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加速，可以提高應用的加載速度。