我嘗試從 React.js 切換到 Vue.js-js教程-PHP中文網

首頁

web前端

js教程

我嘗試從 React.js 切換到 Vue.js

DDD

Nov 05, 2024 am 02:03 AM

介紹

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

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

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

這就是我們將要看到的！

專案啟動

鍋爐板

誰說開始一個項目，就說尋找一個好的樣板來節省我們數小時，甚至數天的辛苦配置！
不需要看得太遠，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

登入後複製

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

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

一點 npm run dev 來啟動本機開發伺服器，然後！它已經在瀏覽器中運行了！

用於生產？只需輸入 npm run build 命令，檢查輸入後，項目將作為靜態檔案匯出到 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

登入後複製

專案架構

.
├── 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

登入後複製

在專案的建築方面，我們特別發現：

index.html 文件，附標籤
;我們的整個 Vue 應用程式都嫁接在其上；
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文件，用於管理路由和儲存；
一些設定和測試文件；
...當然還有*.vue 文件，分為組件（對應於通用和可重用元素）和視圖（對應於高級元素）頁）

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

Vue 檔案的架構

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

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結構；
style：CSS 樣式表。

這三個部分永遠不會混合？ .
這有幾個優點，這是我在客戶專案的經驗中親身體驗到的：

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

使用

小缺點：先驗沒有自動 CSS 填滿。因此，你應該瞄準像 vue-emotion 這樣的書店。

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

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

現在，如果我們仔細看看 Vue.js API 本身會怎麼樣？

Vue.js API

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

（重新）計算的值

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

✔ 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

登入後複製

這裡僅當 PushBtn 的值改變時才計算 magicNumber。而且它是可驗證的：訊息「再次計算！」僅在單擊不同的按鈕時才顯示在控制台中。
因此，與 React 不同，無需在該函數中明確指定要監視的變數。

同樣，我們還發現了 watch 和 watchEffect ，它們分別允許你對組件的全部或部分屬性的變化做出反應，就像 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

登入後複製

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

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

雙向同步

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

此外，不要像這樣同時管理屬性和基於事件的更新回調：

✔ 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 後繼續 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');

登入後複製

結果：

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

標籤）。

在 React 方面，需要使用 JSX 自己建立每個元素，隨著元件的成長，程式碼的可讀性會降低：

<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>

登入後複製

就我個人而言，從程式碼整潔度方面我比較喜歡Vue的結構，只要不需要調試即可。？
順便問一下，既然我們談論的是調試，那麼 Vue 生態系統工具呢？

開發工具

這裡有 3 個在我的專案開發過程中引起我注意的工具。

VSCode 擴充：Vue 官方

我從顯而易見的開始，但是，是的，VSCode Vue（和其他 IDE）有一個擴展，它添加了語法突出顯示、自動完成、片段等。必備！

但是，我注意到著色和自動完成方面存在一些不穩定，有時有點反复無常？，在這裡我能夠欣賞到 React 方面更大的穩定性。

Vue.js 開發工具

就像 React Developer Tools 瀏覽器插件一樣，還有 Vue.js devtools 插件，我必須承認，它已經提供得很好：

有 4 個選項卡：

組件，我們可以在其中觀察，也可以修改組件的狀態；
Timeline，它允許你記錄事件和元件渲染時間，它實際上對應於瀏覽器「效能」標籤的一個版本，但專注於 Vue；
Pinia，它允許您直接觀察和修改標準儲存的狀態？，我發現特別受歡迎的現成整合；
路線，您可以在其中列出不同的道路及其活動- 這是一個我發現在我的中等規模項目上有點花哨的選項卡（特別是因為該信息與“組件”的信息不是很冗餘" 選項卡，但這對於複雜的路由非常有用。

簡而言之，對於調試，這裡有您需要的一切，甚至更多！

虛擬化

幾乎毫不奇怪（但仍然有優點！），還有一個用於 Vue 的 UI 庫，它實現了 Google 的 Material Design，並且還提供了標準圖標列表：Vuetify。

✔ 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

登入後複製