一、Vue 3 簡(jiǎn)介

Vue 3 是目前web前端最流行的漸進(jìn)式 JavaScript 框架之一，用于構(gòu)建用戶(hù)界面。它在 Vue 2 的基礎(chǔ)上進(jìn)行了諸多改進(jìn)和優(yōu)化，提供了更高效的性能、更靈活的組合式 API 以及更好的 TypeScript 支持等。

二、創(chuàng)建 Vue 3 項(xiàng)目

（一）使用 Vue CLI

1. ?確保已安裝 Node.js，然后在終端中全局安裝 Vue CLI：

npm install -g @vue/cli

1. 創(chuàng)建一個(gè)新的 Vue 3 項(xiàng)目：

vue create my-vue3-project

在創(chuàng)建過(guò)程中，會(huì)有一系列的配置選項(xiàng)，例如是否使用 TypeScript、選擇 CSS 預(yù)處理器等。對(duì)于新手，可以先選擇默認(rèn)配置，后續(xù)再根據(jù)項(xiàng)目需求進(jìn)行調(diào)整。

（二）使用 Vite

1. 通過(guò)以下命令創(chuàng)建一個(gè)基于 Vite 的 Vue 3 項(xiàng)目：

npm init vite@latest my-vite-vue3-project -- --template vue

1. 進(jìn)入項(xiàng)目目錄并安裝依賴(lài)：

cd my-vite-vue3-project npm install

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

（一）以 Vue CLI 創(chuàng)建的項(xiàng)目為例

1. src

   目錄是開(kāi)發(fā)的核心區(qū)域。

• main.js

  （或 main.ts，如果使用 TypeScript）是項(xiàng)目的入口文件。在這里，會(huì)創(chuàng)建 Vue 應(yīng)用實(shí)例并將其掛載到 HTML 頁(yè)面的特定 DOM 元素上。

• App.vue

  是根組件，它定義了整個(gè)應(yīng)用的基本布局結(jié)構(gòu)，并且可以包含其他子組件。

• components

  目錄用于存放自定義的組件，這些組件可以在不同的頁(yè)面或功能模塊中復(fù)用。

四、組件的創(chuàng)建與使用

（一）創(chuàng)建組件

1. 在 components 目錄下創(chuàng)建一個(gè)新的 .vue 文件，比如 MyComponent.vue。
• 在 <template> 標(biāo)簽內(nèi)定義組件的 HTML 結(jié)構(gòu)。例如：

<template><div><h2>{{ title }}</h2><p>{{ content }}</p></div></template>

• 在 <script> 標(biāo)簽中，使用 export default 導(dǎo)出組件的配置對(duì)象。通過(guò) data 函數(shù)返回組件的數(shù)據(jù)對(duì)象：

<script>exportdefault{data(){return{title:'My Component',content:'This is the content of my component.'};}};</script>

• 還可以在 <style> 標(biāo)簽中定義組件的樣式，加上 scoped 屬性可以確保樣式僅應(yīng)用于當(dāng)前組件：

<style scoped> div{border:1px solid#ccc;padding:10px;} </style>

（二）使用組件

1. 在需要使用組件的父組件（如 App.vue）中，首先在 <script> 標(biāo)簽內(nèi)導(dǎo)入組件：

import MyComponent from './components/MyComponent.vue';

1. 然后在組件的 components 選項(xiàng)中注冊(cè)組件：

exportdefault{components:{MyComponent}};

1. 最后在 <template> 標(biāo)簽中使用組件標(biāo)簽：

<template><div><MyComponent/></div></template>

五、響應(yīng)式數(shù)據(jù)處理

（一）ref 的使用

1. ref

   主要用于創(chuàng)建基本數(shù)據(jù)類(lèi)型（如數(shù)字、字符串、布爾值等）的響應(yīng)式數(shù)據(jù)。在組件的 <script> 中：

import{ ref}from'vue';exportdefault{setup(){const count=ref(0);const message=ref('Hello, Vue 3!');return{ count, message};}};

1. 在模板中訪問(wèn) ref 數(shù)據(jù)時(shí)，需要使用 .value 屬性：

<template><div><p>Count: {{ count.value }}</p><p>Message: {{ message.value }}</p><button@click="count.value++">Increment Count</button></div></template>

（二）reactive 的使用

1. reactive

   用于創(chuàng)建復(fù)雜數(shù)據(jù)類(lèi)型（如對(duì)象、數(shù)組）的響應(yīng)式數(shù)據(jù)。例如：

import{ reactive}from'vue';exportdefault{setup(){const user=reactive({name:'John',age:30,hobbies:['reading','coding']});return{ user};}};

1. 在模板中可以直接訪問(wèn)和修改 reactive 對(duì)象的屬性：

<template><div><p>Name: {{ user.name }}</p><p>Age: {{ user.age }}</p><p>Hobbies: {{ user.hobbies.join(', ') }}</p><button@click="user.age++">Increment Age</button></div></template>

六、生命周期鉤子

（一）組合式 API 中的生命周期鉤子

1. 在 Vue 3 的組合式 API 中，有一些新的生命周期鉤子函數(shù)。例如，onMounted 鉤子在組件掛載完成后被調(diào)用。在組件的 setup 函數(shù)中使用：

import { onMounted} from 'vue';exportdefault{setup(){onMounted(()=>{console.log('Component is mounted.');});return{};}};

1. 還有其他鉤子如 onUpdated（組件更新后調(diào)用）、onUnmounted（組件卸載前調(diào)用）等，可以根據(jù)項(xiàng)目需求在 setup 函數(shù)中引入并使用。

七、路由基礎(chǔ)

（一）安裝和配置 Vue Router

1. 首先安裝 Vue Router 4：

npm install vue-router@4

1. 在 src 目錄下創(chuàng)建 router 目錄，并在其中創(chuàng)建 index.js（或 index.ts）文件。
• 定義路由數(shù)組，每個(gè)路由對(duì)象包含路徑 path 和對(duì)應(yīng)的組件 component：

import { createRouter, createWebHistory} from'vue-router';importHomefrom'../views/Home.vue';importAboutfrom'../views/About.vue';const routes=[{path:'/',component:Home},{path:'/about',component:About}];const router=createRouter({history:createWebHistory(), routes});exportdefault router;

（二）在應(yīng)用中使用路由

1. 在 main.js（或 main.ts）中導(dǎo)入并使用路由：

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

1. 在 App.vue 的 <template> 中添加 <router-view> 標(biāo)簽，用于顯示當(dāng)前路由對(duì)應(yīng)的組件：

<template><div><router-view></router-view></div></template>

八、狀態(tài)管理（Vuex）基礎(chǔ)

（一）安裝和配置 Vuex

1. 安裝 Vuex 4（適用于 Vue 3）：

npm install vuex@next

1. 在 src 目錄下創(chuàng)建 store 目錄，并在其中創(chuàng)建 index.js（或 index.ts）文件。
• 定義狀態(tài)、 mutations 等：

import{ createStore}from'vuex';const store=createStore({state(){return{count:0};},mutations:{increment(state){ state.count++;}}});exportdefault store;

（二）在組件中使用 Vuex

1. 在 main.js（或 main.ts）中導(dǎo)入并使用 Vuex：

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

1. 在組件中，可以通過(guò) this.$store（選項(xiàng)式 API）或者 useStore（組合式 API）來(lái)訪問(wèn)和修改狀態(tài)。例如，使用組合式 API：

import { useStore} from 'vuex';export default{setup(){const store=useStore();constincrementCount=()=>{ store.commit('increment');};return{ incrementCount};}};