介紹

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

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

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

這就是我們將要看到的！

專案啟動

鍋爐板

誰說開始一個項目，就說尋找一個好的樣板來節(jié)省我們數(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ù)時候，熱模組替換 (HMR) 效果很好。

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

用於生產(chǎn)？只需輸入 npm run build 命令，檢查輸入後，項目將作為靜態(tài)檔案匯出到 dist 目錄中（在已啟動 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)籤
  ;我們的整個 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文件，用於管理路由和儲存；
• 一些設(shè)定和測試文件；
• ...當(dāng)然還有*.vue 文件，分為組件（對應(yīng)於通用和可重用元素）和視圖（對應(yīng)於高級元素）頁）

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

Vue 檔案的架構(gòu)

這是受官方網(wǎng)站啟發(fā)的程式碼片段。它只是在單擊時更改文字的顏色，並在適用的情況下顯示短語“上面的文字是綠色的”，但它代表了 *.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 個截然不同的部分：

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

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

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

使用

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

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

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

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

Vue.js API

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

（重新）計算的值

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

? 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 的值改變時才計算 magicNumber。而且它是可驗證的：訊息「再次計算！」僅在單擊不同的按鈕時才顯示在控制臺中。
因此，與 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

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

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

雙向同步

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

此外，不要像這樣同時管理屬性和基於事件的更新回調(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

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

和家長：

.
├── 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 指令因此可以為可迭代的每個元素自動重複 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)文章！