本文檔旨在介紹Vue的幾個(gè)基本概念。參考了官方文檔以及 《Vue.js設(shè)計(jì)與實(shí)現(xiàn)》(霍春陽 著)一書，籠統(tǒng)的羅列以下概念。
1. 什么是Vue
Vue (發(fā)音為 /vju?/，類似 view) 是一款用于構(gòu)建用戶界面的 JavaScript 框架。它基于標(biāo)準(zhǔn) HTML、CSS 和 JavaScript 構(gòu)建，并提供了一套聲明式的、組件化的編程模型，幫助你高效地開發(fā)用戶界面。無論是簡(jiǎn)單還是復(fù)雜的界面，Vue 都可以勝任。
2. Vue漸進(jìn)式
什么是漸進(jìn)式
漸進(jìn)式開發(fā)（Incremental Development）是一種軟件開發(fā)方法，其核心思想是將大型或復(fù)雜的項(xiàng)目分解為一系列小的、可管理的部分（通常稱為“增量”或“迭代”），然后逐步設(shè)計(jì)、實(shí)現(xiàn)和交付這些部分。每個(gè)增量都會(huì)在上一個(gè)增量的基礎(chǔ)上，增加新的功能或特性，最終構(gòu)建出完整的系統(tǒng)。
Vue漸進(jìn)式體現(xiàn)
Vue.js 的“漸進(jìn)式”是其最核心的設(shè)計(jì)理念，意味著你可以根據(jù)項(xiàng)目需求和復(fù)雜度，逐步地采用 Vue 的功能。它既是一個(gè)可以輕松引入現(xiàn)有項(xiàng)目的輕量級(jí)視圖庫，也是一個(gè)能夠構(gòu)建復(fù)雜單頁面應(yīng)用（SPA）的完整框架。最明顯的體現(xiàn)就是跟著項(xiàng)目的復(fù)雜度的慢慢升高使用 逐步集成 的方式進(jìn)行學(xué)習(xí)開發(fā)。
| 應(yīng)用場(chǎng)景 | 使用方式 | 說明 |
|---|---|---|
| 簡(jiǎn)單交互/學(xué)習(xí)使用 | 僅通過 <script>標(biāo)簽引入 Vue.js |
僅在Html文件中調(diào)用 script 標(biāo)簽引入使用即可 |
| 復(fù)雜單頁面應(yīng)用 | Vue.js + Vue Router + Pinia | 構(gòu)建現(xiàn)代化的單頁面應(yīng)用，處理多視圖、路由和復(fù)雜狀態(tài)管理 |
| 全棧/企業(yè)級(jí)應(yīng)用 | Vite + Vue.js + Vue Router + Pinia + SSR框架（如 Nuxt.js） | 構(gòu)建高性能、SEO 友好、結(jié)構(gòu)復(fù)雜的應(yīng)用程序 |
白話說明：從這里也體現(xiàn)了Vue的學(xué)習(xí)成本要比React要低的原因，需要用到哪里我再去學(xué)習(xí)哪里，用到什么才去加載什么，這種可插拔的低耦合的模式大大的降低了學(xué)成成本，提高了開發(fā)效率。
3. API風(fēng)格
選項(xiàng)式API (Options API)
Vue2的常規(guī)用法就是選項(xiàng)式。在組件上暴露一些選項(xiàng)比如：data，methods， mounted等，都會(huì)是函數(shù)內(nèi)部的 this 指向當(dāng)前組件實(shí)例。
組合式API (Composition API)
- 與
<script setup>搭配使用。 - 選項(xiàng)式 API 是在組合式 API 的基礎(chǔ)上實(shí)現(xiàn)的
為方便代碼風(fēng)格保持和代碼運(yùn)維，建議整個(gè)項(xiàng)目都是用組合式。不建議兩種模式摻雜使用。
