前言

首先需要提醒大家的是，Vue2 已經(jīng)在2023年停止維護(hù)，為了能更好地適應(yīng)前端開發(fā)的發(fā)展趨勢以及獲得更好的性能和功能，我們將從這篇文章開始進(jìn)入Vue3的階段。如果對Vue2有想了解的小伙伴可以自行查詢學(xué)習(xí)。本文將帶你了解 Vue3 的基礎(chǔ)概念，并手把手教你完成環(huán)境搭建，為后續(xù)的階段打下堅(jiān)實(shí)的基礎(chǔ)。

一、Vue3 簡介

Vue3 是 Vue.js 的最新主要版本，于 2020 年 9 月正式發(fā)布。它在性能、可維護(hù)性和開發(fā)體驗(yàn)方面都有了顯著的改進(jìn)。相比 Vue2，Vue3 的主要特點(diǎn)包括：

• 更高效的響應(yīng)式系統(tǒng)：使用Proxy替代了Object.defineProperty，解決了數(shù)組和深層嵌套對象監(jiān)聽的問題。

• 組合式 API（Composition API）：提供了更靈活的方式來組織組件邏輯，尤其適合復(fù)雜場景下的代碼復(fù)用。

• 更好的 TypeScript 支持：Vue3 內(nèi)置對 TypeScript 的友好支持，使得類型推導(dǎo)更加準(zhǔn)確。

• 體積更小，性能更高：通過 Tree-shaking 和優(yōu)化核心庫，Vue3 的體積更小，運(yùn)行效率更高。

二、Vue3 基礎(chǔ)概念

（一）響應(yīng)式系統(tǒng)的改進(jìn)

Vue3 的響應(yīng)式系統(tǒng)是其最重要的改進(jìn)之一。在 Vue2 中，響應(yīng)式依賴于 Object.defineProperty，這種方式存在以下問題：

• 無法監(jiān)聽對象屬性的動態(tài)添加或刪除。

• 對數(shù)組的操作支持有限。

Vue3 使用了 ES6 的Proxy來實(shí)現(xiàn)響應(yīng)式，解決了這些問題。例如：

const handler = {
  get(target, key, receiver) {
    console.log(`獲取屬性: ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`設(shè)置屬性: ${key} = ${value}`);
    return Reflect.set(target, key, value, receiver);
  }
};
const state = new Proxy({ count: 0 }, handler);
state.count++; // 輸出：獲取屬性: count，設(shè)置屬性: count = 1
 

通過Proxy，Vue3 能夠全面監(jiān)聽對象和數(shù)組的變化，從而提升性能和開發(fā)體驗(yàn)。

（二）組合式 API

組合式 API 是 Vue3 引入的一項(xiàng)重要特性，旨在解決 Vue2 中選項(xiàng)式 API 在復(fù)雜組件中邏輯分散的問題。它的核心思想是將相關(guān)的邏輯組合在一起，而不是按照選項(xiàng)（如data、methods）來組織。

示例代碼

import { ref, computed } from 'vue';
export default {
  setup() {
    const count = ref(0); // 定義一個(gè)響應(yīng)式變量
    const doubleCount = computed(() => count.value * 2); // 計(jì)算屬性
    function increment() {
      count.value++;
    }
    return {
      count,
      doubleCount,
      increment
    };
  }
};

在這個(gè)例子中，所有與計(jì)數(shù)相關(guān)的邏輯都被集中到setup函數(shù)中，代碼更加清晰易讀

（三）更好的類型推導(dǎo)

Vue3 內(nèi)置了對 TypeScript 的深度支持，開發(fā)者可以直接在組件中使用類型聲明，減少類型錯(cuò)誤的發(fā)生。例如：

import { defineComponent, ref } from 'vue';
interface User {
  name: string;
  age: number;
}
export default defineComponent({
  setup() {
    const user = ref<User>({ name: 'Alice', age: 25 });
    function updateAge(newAge: number) {
      user.value.age = newAge;
    }
    return { user, updateAge };
  }
});

通過 TypeScript，我們可以確保數(shù)據(jù)類型的正確性，提高代碼的健壯性。

三、環(huán)境搭建

（一）安裝 Node.js

在搭建 Vue3 開發(fā)環(huán)境之前，我們需要先安裝 Node.js。Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行時(shí)環(huán)境，它允許我們在服務(wù)器端運(yùn)行 JavaScript。

• 訪問Node.js 官方網(wǎng)站。

• 根據(jù)您的操作系統(tǒng)（Windows、macOS 或 Linux），選擇對應(yīng)的安裝包并下載。

• 安裝完成后，可以通過以下命令檢查是否安裝成功：

node -v
npm -v

如果能夠正確輸出版本號，則說明安裝成功。

（二）使用 Vite 創(chuàng)建 Vue3 項(xiàng)目

相比于傳統(tǒng)的 Vue CLI，Vite是一個(gè)更現(xiàn)代化的構(gòu)建工具，具有更快的冷啟動速度和熱更新能力。接下來，我們將使用Vite來創(chuàng)建一個(gè) Vue3 項(xiàng)目。

• 全局安裝create-vue

打開終端或命令提示符，運(yùn)行以下命令以全局安裝create-vue：

npm install -g create-vue

• 創(chuàng)建 Vue3 項(xiàng)目

使用以下命令創(chuàng)建一個(gè)新的 Vue3 項(xiàng)目：

create-vue my-vue3-project

在創(chuàng)建過程中，系統(tǒng)會提示您選擇一些配置選項(xiàng)，例如：

• 是否使用 TypeScript？

• 是否使用 Pinia（Vuex 的替代方案）？

• 是否啟用測試工具（如 Vitest 和 Cypress）？

您可以根據(jù)實(shí)際需求進(jìn)行選擇。如果不確定，可以選擇默認(rèn)配置。

• 進(jìn)入項(xiàng)目目錄并安裝依賴

創(chuàng)建完成后，進(jìn)入項(xiàng)目目錄并安裝依賴：

cd my-vue3-project
npm install

• 啟動開發(fā)服務(wù)器

安裝完成后，運(yùn)行以下命令啟動開發(fā)服務(wù)器：

npm run dev

啟動成功后，終端會顯示一個(gè)本地訪問地址（通常是http://localhost:5173）。打開瀏覽器訪問該地址，即可看到項(xiàng)目運(yùn)行效果。

四、項(xiàng)目結(jié)構(gòu)解析

創(chuàng)建好項(xiàng)目后，我們來看一下 Vue3 項(xiàng)目的基本結(jié)構(gòu)（以默認(rèn)配置為例）：

my-vue3-project
├── node_modules/        # 項(xiàng)目依賴的模塊
├── public/              # 靜態(tài)資源，如 favicon.ico 等
├── src/                 # 項(xiàng)目的源代碼 
│   ├── assets/          # 圖片、樣式等資源
│   ├── components/      # 自定義組件
│   ├── views/           # 頁面視圖
│   ├── App.vue          # 根組件
│   ├── main.ts          # 入口文件（TypeScript）
├── .gitignore           # Git 忽略配置
├── index.html           # 頁面模板
├── package.json         # 項(xiàng)目依賴和腳本配置
├── tsconfig.json        # TypeScript 配置（如果選擇使用 TypeScript）
└── vite.config.ts       # Vite 配置文件

關(guān)鍵文件說明

• index.html

項(xiàng)目的基礎(chǔ) HTML 文件，所有的內(nèi)容都會被注入到這個(gè)文件中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite + Vue3</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

• main.ts

項(xiàng)目的入口文件，負(fù)責(zé)初始化 Vue 應(yīng)用并掛載到 DOM 上。

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

• App.vue

根組件，定義了應(yīng)用的整體結(jié)構(gòu)。

<template>
  <div id="app">
    <h1>Hello Vue3 with Vite</h1>
  </div>
</template>
<script lang="ts">
export default {
  name: 'App'
};
</script>
<style>
#app {
  text-align: center;
  color: #2c3e50;
}
</style>

五、總結(jié)

在本篇文章中，我們了解了 Vue3 的基礎(chǔ)概念，并通過Vite成功搭建了開發(fā)環(huán)境。相比于傳統(tǒng)的 Vue CLI，Vite提供了更快的開發(fā)體驗(yàn)，特別適合現(xiàn)代前端項(xiàng)目的需求。接下來，我們將深入學(xué)習(xí) Vue3 的更多特性和功能，逐步提升我們的開發(fā)能力。

到此這篇關(guān)于Vue3基礎(chǔ)概念與環(huán)境搭建的文章就介紹到這了,更多相關(guān)Vue3基礎(chǔ)概念與環(huán)境搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論