介紹

幾年前，像許多其他人一樣，我對 React.js 前端庫的鉤子和功能組件的到來感到「興奮」。他們提供了一種全新的開發(fā)方式，編寫的程式碼比使用 Components 類別少得多。我真的被迷住了，並且迷上了很長一段時(shí)間。

今天我不得不選擇 Vue.js 框架來滿足一個(gè)全新的客戶端專案的需求。在這個(gè)專案結(jié)束時(shí)，我對自己說，這是為您作為這個(gè)框架的新用戶提供反饋的機(jī)會(huì)！

那麼，這種技能的提升是否符合 Vue.js 的惡名？
如今，使用 Vue 開發(fā)前端比使用 React 更好嗎？

這就是我們將要看到的！

專案啟動(dòng)

鍋爐板

誰說開始一個(gè)項(xiàng)目，就說尋找一個(gè)好的樣板來節(jié)省我們數(shù)小時(shí)，甚至數(shù)天的辛苦配置！
不需要看得太遠(yuǎn)，npm create vue@latest 指令很大程度上滿足了我的需求：

? Project name: … myproject-vue
? 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 an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

已經(jīng)支援 Typescript 語言，提供路由系統(tǒng)和商店，甚至還有單元和端對端測試的空間！

預(yù)設(shè)情況下，Vite 捆綁程式已安裝。這不是讓我不高興嗎！ ？事實(shí)上，建造速度很快，而且大多數(shù)時(shí)候，熱模組替換 (HMR) 效果很好。

一點(diǎn) npm run dev 來啟動(dòng)本機(jī)開發(fā)伺服器，然後！它已經(jīng)在瀏覽器中運(yùn)行了！

用於生產(chǎn)？只需輸入 npm run build 命令，檢查輸入後，項(xiàng)目將作為靜態(tài)檔案匯出到 dist 目錄中（在已啟動(dòng) Typescript 的情況下）：

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

專案架構(gòu)

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

在專案的建築方面，我們特別發(fā)現(xiàn)：

• index.html 文件，附標(biāo)籤
  ;我們的整個(gè) Vue 應(yīng)用程式都嫁接在其上；
• main.ts，依序建立App元件、router和store：

? Project name: … myproject-vue
? 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 an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

• 純.ts文件，用於管理路由和儲(chǔ)存；
• 一些設(shè)定和測試文件；
• ...當(dāng)然還有*.vue 文件，分為組件（對應(yīng)於通用和可重用元素）和視圖（對應(yīng)於高級元素）頁）

簡而言之，檔案架構(gòu)相當(dāng)簡單，並且與 React 相對相似，即使在樣板檔案中檢查了很多選項(xiàng)。
到目前為止，React 還沒有什麼真正新鮮的東西。這時(shí)就會(huì)出現(xiàn)顯著差異！

Vue 檔案的架構(gòu)

這是受官方網(wǎng)站啟發(fā)的程式碼片段。它只是在單擊時(shí)更改文字的顏色，並在適用的情況下顯示短語“上面的文字是綠色的”，但它代表了 *.vue 檔案的典型架構(gòu)：

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

注意事件與@click的綁定，條件顯示與v-if，以及CSS中與v-bind()的綁定。

程式碼分為 3 個(gè)截然不同的部分：

• 腳本：控製程式碼；
• 模板：HTML結(jié)構(gòu)；
• style：CSS 樣式表。

這三個(gè)部分永遠(yuǎn)不會(huì)混合？ .
這有幾個(gè)優(yōu)點(diǎn)，這是我在客戶專案的經(jīng)驗(yàn)中親身體驗(yàn)到的：

• HTML 結(jié)構(gòu)清晰、固定，並且具有非常聲明式風(fēng)格 - 一切都在那裡，甚至是有條件顯示的標(biāo)籤；
• 邏輯部分與顯示部分分離良好；
• 可以就地編寫純CSS，直接連結(jié)到元件，無需安裝第三方函式庫；
• 儘管樣式分離，您仍然可以在 CSS 中插入變數(shù)。

使用

小缺點(diǎn)：先驗(yàn)沒有自動(dòng) CSS 填滿。因此，你應(yīng)該瞄準(zhǔn)像 vue-emotion 這樣的書店。

從我的角度來看，我發(fā)現(xiàn)這種「all-in-JS」函式庫有點(diǎn)破壞了 Vue 提供的架構(gòu)，而且顯然，瀏覽器特定的 CSS 屬性在當(dāng)今時(shí)代已經(jīng)很少見了。 因此，de Vue 通常是自給自足的。

簡而言之，我發(fā)現(xiàn)這種一體式架構(gòu)非常令人愉快，但各個(gè)部分卻清晰分開。這可以讓您保持乾淨(jìng)的程式碼，而且更簡潔。事實(shí)上，「業(yè)務(wù)邏輯/顯示/樣式」這三個(gè)部分的同時(shí)存在通常會(huì)鼓勵(lì)您將程式碼重新劃分為更小的模組，從而劃分為更小的檔案。

現(xiàn)在，如果我們仔細(xì)看看 Vue.js API 本身會(huì)怎麼樣？

Vue.js API

在這裡，我不會(huì)向您提供我遇到的 Vue.js API 的所有元素的詳盡列表，而是只提供一些我發(fā)現(xiàn)相當(dāng)代表 Vue 邏輯的非常具體的元素。

（重新）計(jì)算的值

讓我們從 React 世界中眾所周知的操作開始：在資料更新後智慧地重新計(jì)算 HTML 渲染（或變數(shù)）。
有一個(gè)非常直觀的compute()函數(shù)，它受益於記憶系統(tǒng)（一種「快取」），以避免每次重新計(jì)算輸出值：

? Project name: … myproject-vue
? 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 an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

這裡僅當(dāng) PushBtn 的值改變時(shí)才計(jì)算 magicNumber。而且它是可驗(yàn)證的：訊息「再次計(jì)算！」僅在單擊不同的按鈕時(shí)才顯示在控制臺中。
因此，與 React 不同，無需在該函數(shù)中明確指定要監(jiān)視的變數(shù)。

同樣，我們還發(fā)現(xiàn)了 watch 和 watchEffect ，它們分別允許你對組件的全部或部分屬性的變化做出反應(yīng)，就像 React 中的 useEffect 一樣：

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

只需點(diǎn)擊數(shù)字修改按鈕即可增加「手錶」計(jì)數(shù)器。
然後，watch() 允許我們在每次某些變數(shù)發(fā)生變化時(shí)觸發(fā)回調(diào)。

此功能的優(yōu)勢在於深入變數(shù)修改分析：Vue 甚至可以偵測到子物件深處的變化！

雙向同步

從父元件聲明屬性並將其傳遞給子元件是相當(dāng)重複的操作。也可以在子級和父級之間同步此值，例如在表單的輸入中。

此外，不要像這樣同時(shí)管理屬性和基於事件的更新回調(diào)：

? Project name: … myproject-vue
? 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 an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

…可以使用 DefineModel 巨集來代替，這樣可以簡化寫：

vite v5.2.11 building for production...
? 48 modules transformed.
dist/index.html                      0.43 kB │ gzip:  0.28 kB
dist/assets/AboutView-C6Dx7pxG.css   0.09 kB │ gzip:  0.10 kB
dist/assets/index-D6pr4OYR.css       4.21 kB │ gzip:  1.30 kB
dist/assets/AboutView-CEwcYZ3g.js    0.22 kB │ gzip:  0.20 kB
dist/assets/index-CfPjtpcd.js       89.23 kB │ gzip: 35.29 kB
? built in 591ms

短多了！ ？再說了，模型只有一個(gè)，我連命名都可以省去！

和家長：

.
├── README.md
├── e2e/
├── index.html
├── package.json
├── public/
├── src/
│   ├── App.vue
│   ├── assets/
│   ├── components/
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   ├── __tests__/
│   │   └── icons/
│   ├── main.ts
│   ├── router/
│   │   └── index.ts
│   ├── stores/
│   │   └── counter.ts
│   └── views/
│       ├── AboutView.vue
│       └── HomeView.vue
├── tsconfig.json
└── vite.config.ts

for 迴圈

看到 v-model 後繼續(xù) v-for 讓我意識到 Vue.js 開始透過隱式程式碼引入很多「魔法」：

import './assets/main.css';

import { createApp } from 'vue';
import { createPinia } from 'pinia';

import App from './App.vue';
import router from './router';

const app = createApp(App); // composant racine

app.use(createPinia()); // store
app.use(router); // routage des pages front

app.mount('#app');

結(jié)果：

正如人們所期望的，v-for 指令因此可以為可迭代的每個(gè)元素自動(dòng)重複 HTML 模式的一部分（此處為

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

  const color = ref('green');

  function toggleColor() {
    color.value = color.value === 'green' ? 'blue' : 'green';
  }
</script>

<template>
  <p class="main-text" @click="toggleColor">
    Cliquez sur ce texte pour changer de couleur.
  </p>
  <p v-if="color === 'green'">Le texte ci-dessus est vert.</p>
</template>

<style scoped>
  .main-text {
    color: v-bind(color);
  }
</style>

? Project name: … myproject-vue
? 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 an End-to-End Testing Solution? ? Playwright
? Add ESLint for code quality? … No / Yes
? Add Prettier for code formatting? … No / Yes
? Add Vue DevTools 7 extension for debugging? (experimental) ? No / Yes

以上是我嘗試從 React.js 切換到 Vue.js的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！