Vue3+Vite初體驗

一、爲何要使用？

1. 爲何要使用Vue3?

你說Vue2用的好好的，爲啥要用Vue3呢？就因爲它是最新版？不，還不是因爲Vue3它是真的香嘛！

① 組合式API，編碼更加自由

Vue3在Vue2的選項式API基礎上新增了組合式API，組合式API不再像選項式API那樣拘泥於固定的對象結構，而是使用函數式編程，更加自由，耦合度更低。例如：

<script setup>
import { ref } from "vue";

const count = ref(0); 
function countUp() {
  count.value++;
}
</script>

<template>
    <p>{{ count }}</p>
    <button @click="countUp">Click me!</button>
</template>

② API寫法統一，減少記憶負擔

例如，Vue2中的$mount()在Vue3中變成了mount()；刪除事件修飾符.sync，統一用v-model替代，等等。

③ 數據響應式優化，運行更加高效

Vue2的數據響應式原理使用的是Object.defineProperty()，但它存在一定的侷限性，所以纔有了一些類似$set()和$delete()之類的方法。

而Vue3則不同，它使用的是new Proxy()來實現數據響應式，$set()和$delete()方法也不復存在。

2. 爲何要使用Vite?

下一代前端開發與構建工具

這是Vite官網給它的定義。

不可否認，它的誕生，大大提升了模塊熱更新的速度，尤其是在大型項目中，相比於Webpack，Vite的優勢愈加突出。或許在未來某一天，Vite真的能夠完全取代Webpack。

二、如何使用？

有兩種方式來安裝使用它們，一種是先安裝好Vite後再選擇使用Vue3，另一種則是直接初始化安裝Vue3。如果是一開始就決定要選擇Vue作爲開發框架的話，建議直接選擇第二種方式比較方便。

1. 先安裝Vite，後選擇Vue

npm i vite -g
npm create vite@latest

然後根據引導提示一步步填寫項目名稱和選擇相應的開發框架和語言即可:

Ok to proceed? (y) 
✔ Project name: … vue3
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

這裏我項目名寫的vue3，框架選擇Vue，語言選擇JavaScript。

2. 直接初始化安裝Vue3

npm init vue@latest

然後同樣根據引導提示選擇相應選項即可：

✔ Project name: … vue3
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes

此時，無論你選擇的是以上哪種方式，都會在你命令行所在的當前目錄下生成一個項目文件夾，這裏生成的文件夾名稱就是vue3。

最後，我們可以進入這個文件夾，安裝依賴，啓動項目即可：

cd vue3
npm install
npm run dev

項目開發完成後，可以通過命令行npm run build完成項目打包，如若需要預覽打包後的頁面，可以通過命令行npm run preview來實現本地服務器預覽。

---

結束語

初次上手體驗Vue3+Vite，還未在正式項目中使用，如文中有不當之處，歡迎指正，謝謝！