介紹

幾年前，像許多其他人一樣，我對(duì) React.js 前端庫(kù)的鉤子和功能組件的到來(lái)感到“興奮”。他們提供了一種全新的開(kāi)發(fā)方式，編寫(xiě)的代碼比使用 Components 類少得多。我真的被迷住了，并且迷上了很長(zhǎng)一段時(shí)間。

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

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

這就是我們將要看到的！

項(xiàng)目啟動(dòng)

鍋爐板

誰(shuí)說(shuō)開(kāi)始一個(gè)項(xiàng)目，就說(shuō)尋找一個(gè)好的樣板來(lái)節(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 語(yǔ)言，提供路由系統(tǒng)和商店，甚至還有單元和端到端測(cè)試的空間！

默認(rèn)情況下，Vite 捆綁程序已安裝。這不是讓我不高興嗎??？事實(shí)上，構(gòu)建速度很快，而且大多數(shù)時(shí)候，熱模塊替換 (HMR) 效果很好。

一點(diǎn) npm run dev 來(lái)啟動(dòng)本地開(kāi)發(fā)服務(wù)器，然后！它已經(jīng)在瀏覽器中運(yùn)行了！

用于生產(chǎn)？只需輸入 npm run build 命令，檢查輸入后，項(xiàng)目將作為靜態(tài)文件導(dǎo)出到 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

項(xiàng)目架構(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

在項(xiàng)目的建筑方面，我們特別發(fā)現(xiàn)：

• index.html 文件，帶有標(biāo)簽
  ;我們的整個(gè) Vue 應(yīng)用程序都嫁接在其上；
• main.ts，依次創(chuàng)建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ǔ)；
• 一些配置和測(cè)試文件；
• ...當(dāng)然還有 *.vue 文件，分為 組件（對(duì)應(yīng)于通用和可重用元素）和 視圖（對(duì)應(yīng)于高級(jí)元素）頁(yè)）

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

Vue 文件的架構(gòu)

這是受官方網(wǎng)站啟發(fā)的代碼片段。它只是在單擊時(shí)更改文本的顏色，并在適用的情況下顯示短語(yǔ)“上面的文本是綠色的”，但它代表了 *.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)，這是我在客戶項(xiàng)目的經(jīng)驗(yàn)中親身體驗(yàn)到的：

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

使用

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

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

簡(jiǎn)而言之，我發(fā)現(xiàn)這種一體式架構(gòu)非常令人愉快，但各個(gè)部分卻清晰分開(kāi)。這可以讓您保持干凈的代碼，而且更加簡(jiǎn)潔。事實(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 世界中眾所周知的操作開(kāi)始：在數(shù)據(jù)更新后智能地重新計(jì)算 HTML 渲染（或變量）。
有一個(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 的值發(fā)生變化時(shí)才計(jì)算 magicNumber。而且它是可驗(yàn)證的：消息“再次計(jì)算！”僅當(dāng)單擊不同的按鈕時(shí)才顯示在控制臺(tái)中。
因此，與 React 不同，無(wú)需在該函數(shù)中顯式指定要監(jiān)視的變量。

同樣，我們還發(fā)現(xiàn)了 watch 和 watchEffect ，它們分別允許你對(duì)組件的全部或部分屬性的變化做出反應(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() 允許我們?cè)诿看文承┳兞堪l(fā)生變化時(shí)觸發(fā)回調(diào)。

該功能的優(yōu)勢(shì)在于深入變量修改分析：Vue 甚至可以檢測(cè)到子對(duì)象深處的變化！

雙向同步

從父組件聲明屬性并將其傳遞給子組件是一個(gè)相當(dāng)重復(fù)的操作。也可以在子級(jí)和父級(jí)之間同步此值，例如在表單的輸入中。

此外，不要像這樣同時(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 宏來(lái)代替，這樣可以簡(jiǎn)化編寫(xiě)：

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

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

和家長(zhǎng)：

.
├── 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 循環(huán)

看到 v-model 后繼續(xù) v-for 讓我意識(shí)到 Vue.js 開(kāi)始通過(guò)隱式代碼引入很多“魔法”：

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)重復(fù) 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)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！