Saya cuba beralih kepada Vue.js daripada React.js

pengenalan

Beberapa tahun yang lalu, seperti kebanyakan orang lain, saya "digembar-gemburkan" dengan kedatangan cangkuk dan komponen berfungsi perpustakaan hadapan React.js. Mereka menawarkan cara pembangunan yang benar-benar baharu dengan menulis kod yang lebih sedikit berbanding dengan kelas Komponen. Saya benar-benar ketagih, dan untuk seketika.

Hari ini saya terpaksa memilih rangka kerja Vue.js untuk memenuhi keperluan projek pelanggan serba baharu. Dan setelah sampai ke penghujung projek ini, saya berkata kepada diri saya sendiri bahawa ini adalah peluang untuk menawarkan anda maklum balas sebagai pengguna baharu rangka kerja ini!

Jadi, adakah peningkatan kemahiran ini sesuai dengan kemasyhuran Vue.js?
Adakah lebih baik, hari ini, untuk membangunkan bahagian hadapan dalam Vue daripada dalam React?

Itulah yang akan kita lihat!

Permulaan projek

Plat dandang

Siapa kata memulakan projek, kata mencari boilerplate yang bagus untuk menjimatkan masa kami, malah berhari-hari konfigurasi yang susah payah!
Tanpa perlu melihat jauh, arahan npm create vue@latest sebahagian besarnya memenuhi keperluan saya:

✔ 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

Bahasa Typescript sudah disokong, sistem penghalaan dan kedai ditawarkan, malah terdapat ruang untuk ujian unit dan End-to-End!

Secara lalai, pengikat Vite dipasang. Mana taknya saya tak puas hati!? Memang, binaan adalah pantas dan, kebanyakan masa, Penggantian Modul Panas (HMR) berfungsi dengan baik.

Sedikit npm run dev untuk melancarkan pelayan dev tempatan, dan presto! Ia sudah berjalan dalam penyemak imbas!

Dan untuk pengeluaran? Hanya masukkan perintah binaan run npm, dan projek dieksport sebagai fail statik dalam direktori dist selepas menyemak taip (dalam kes di mana Typescript telah diaktifkan):

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

Seni bina projek

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

Di bahagian seni bina projek, kami dapati khususnya:

• fail index.html, dengan teg
  di mana keseluruhan aplikasi Vue kami dicantumkan;
• utama.ts, dengan penciptaan berturut-turut komponen Apl, penghala dan kedai:

✔ 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

• fail .ts tulen, untuk mengurus penghalaan dan kedai;
• beberapa fail konfigurasi dan ujian;
• ... dan sudah tentu fail *.vue, dibezakan kepada komponen (yang lebih sesuai dengan elemen generik dan boleh guna semula), dan pandangan (yang lebih sepadan dengan tahap tinggi muka surat)

Ringkasnya, seni bina fail agak mudah dan agak serupa dengan React, walaupun dengan banyak pilihan yang ditandakan dalam boilerplate.
Setakat ini, datang dari React, tiada apa yang benar-benar baru. Pada masa itulah perbezaan ketara kelihatan!

Seni bina fail Vue

Berikut ialah coretan kod yang diilhamkan oleh tapak web rasmi. Ia hanya menukar warna teks jika diklik dan memaparkan frasa "Teks di atas berwarna hijau" jika berkenaan, tetapi ia mewakili seni bina tipikal fail *.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

Perhatikan pengikatan acara dengan @click, paparan bersyarat dengan v-if dan pengikatan dalam CSS dengan v-bind().

Kod dipisahkan kepada 3 bahagian yang sangat berbeza:

• skrip: kod kawalan;
• templat: struktur HTML;
• gaya: helaian gaya CSS.

Dan ketiga-tiga bahagian ini tidak pernah bercampur ?.
Ini mempunyai beberapa kelebihan yang saya alami secara peribadi sepanjang pengalaman saya pada projek pelanggan:

• Struktur HTML adalah jelas, tetap dan dalam sangat gaya pengisytiharan - semuanya ada, malah teg dipaparkan secara bersyarat;
• bahagian logik diasingkan dengan baik daripada bahagian paparan;
• anda boleh menulis CSS tulen di tempatnya, dipautkan terus kepada komponen dan tanpa memasang perpustakaan pihak ketiga;
• walaupun terdapat pemisahan gaya, anda masih boleh memasukkan pembolehubah dalam CSS.

Dengan teg berskop pada teg

Kelemahan kecil: a priori tiada poliisi CSS automatik. Oleh itu, anda sepatutnya menyasarkan kedai buku seperti vue-emotion.

Dari sudut pandangan saya, saya dapati pustaka "all-in-JS" jenis ini memecah sedikit seni bina yang ditawarkan oleh Vue, dan jelas sekali, sifat CSS khusus penyemak imbas adalah lebih jarang berlaku pada zaman kita. Oleh itu de Vue selalunya berdikari.

Ringkasnya, saya mendapati seni bina semua-dalam-satu ini sangat menyenangkan tetapi dengan bahagian yang dipisahkan dengan jelas. Ini membolehkan anda menyimpan kod bersih, tetapi juga lebih ringkas. Sesungguhnya, kehadiran serentak 3 bahagian "logik / paparan / gaya perniagaan" sering menggalakkan anda membahagikan semula kod anda kepada modul yang lebih kecil, dan oleh itu kepada fail yang lebih kecil.

Sekarang, bagaimana jika kita melihat lebih dekat pada API Vue.js itu sendiri?

API Vue.js

Di sini saya tidak akan memberikan anda senarai lengkap semua elemen API Vue.js yang saya temui, tetapi hanya beberapa yang sangat spesifik yang saya dapati agak mewakili logik Vue .

Nilai (semula) dikira

Mari kita mulakan dengan operasi yang terkenal di alam semesta React: kira semula pemaparan HTML (atau pembolehubah) secara bijak selepas kemas kini data.
Terdapat fungsi pengiraan() yang sangat intuitif yang mendapat manfaat daripada sistem penghafalan (semacam "cache") untuk mengelakkan pengiraan semula nilai output setiap kali:

✔ 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

Di sini magicNumber dikira hanya jika nilai pushedBtn berubah. Dan ia boleh disahkan: mesej "dikira semula!" hanya dipaparkan dalam konsol apabila butang lain diklik.
Jadi, tidak seperti React, tidak perlu menyatakan secara eksplisit pembolehubah untuk dipantau dalam fungsi ini.

Dalam nada yang sama, kami juga menemui jam tangan dan jam tanganEffect yang masing-masing membenarkan anda bertindak balas terhadap perubahan dalam semua atau sebahagian sifat komponen, seperti useEffect dalam React:

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

Hanya satu klik pada butang pengubah suai nombor akan menambah pembilang "jam tangan".
Jam tangan() kemudian membenarkan kami mencetuskan panggilan balik setiap kali pembolehubah tertentu berubah.

Kekuatan fungsi ini terletak pada analisis mendalam pengubahsuaian berubah-ubah: Vue mengesan perubahan walaupun jauh dalam sub-objek!

Penyegerakan dua hala

Mengisytiharkan dan menghantar harta daripada komponen induk kepada komponen anak ialah operasi yang agak berulang. Menyegerakkan nilai ini antara anak dan ibu bapa juga boleh dilakukan, contohnya dalam input borang.

Selain itu, daripada mengurus kedua-dua sifat dan panggilan balik kemas kini berasaskan acara seperti di sini:

✔ 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

… anda boleh menggunakan makro defineModel sebaliknya yang memudahkan penulisan:

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

Lebih pendek! ? Selain itu, dengan hanya mempunyai satu model, saya mungkin tidak mahu menamakannya!

Dan dengan ibu bapa:

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

Gelung untuk

Meneruskan v-for selepas melihat model v membuatkan saya sedar bahawa Vue.js mula memperkenalkan banyak "ajaib" melalui kod tersirat:

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');

Dan hasilnya:

Seperti yang dijangkakan, arahan v-for membolehkan anda mengulangi sebahagian corak HTML secara automatik (di sini teg

) untuk setiap elemen yang boleh diulang.

Di sisi React, adalah perlu untuk menggunakan JSX untuk membina setiap elemen sendiri, menjadikan kod itu kurang boleh dibaca apabila komponen itu berkembang:

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

Secara peribadi, saya mempunyai keutamaan untuk struktur Vue dari segi kebersihan kod, selagi tidak perlu nyahpepijat. ?
Lagipun, memandangkan kita bercakap tentang penyahpepijatan, bagaimana pula dengan alatan ekosistem Vue?

Alat pembangun

Berikut ialah 3 alatan yang menarik perhatian saya dalam pembangunan projek saya.

Sambungan VSCode: Vue Official

Saya mulakan dengan yang jelas, tetapi ya, terdapat sambungan untuk VSCode Vue (dan IDE lain) yang menambahkan penyerlahan sintaks, autolengkap, coretan, dsb. Perkara yang penting!

Walau bagaimanapun, saya melihat beberapa ketidakstabilan dalam pewarnaan dan pelengkapan automatik, yang kadangkala agak berubah-ubah?, di mana saya dapat menghargai kestabilan yang lebih tinggi pada bahagian React.

Vue.js devtools

Seperti pemalam penyemak imbas React Developer Tools, terdapat pemalam devtools Vue.js, yang, saya mesti akui, telah disediakan dengan sangat baik:

Terdapat 4 tab:

• Komponen, di mana kita boleh memerhati, tetapi juga mengubah suai keadaan komponen;
• Garis Masa, yang membolehkan anda merekodkan peristiwa dan masa pemaparan komponen, yang sebenarnya sepadan dengan versi tab "Prestasi" penyemak imbas tetapi tertumpu pada Vue;
• Pinia, yang membolehkan anda memerhati dan mengubah suai secara langsung keadaan kedai standard?, integrasi sedia yang saya dapati sangat dialu-alukan;
• Laluan, di mana anda boleh menyenaraikan jalan yang berbeza dan aktivitinya - ini adalah tab yang saya dapati agak gimik pada projek bersaiz sederhana saya (terutamanya kerana maklumat itu tidak terlalu berlebihan dengan maklumat "Komponen " tab, tetapi yang boleh membuktikan sangat berguna pada penghalaan yang kompleks.

Ringkasnya, untuk nyahpepijat, terdapat semua yang anda perlukan dan lebih banyak lagi!

Vuetify

Hampir tanpa kejutan (tetapi dengan merit yang sama!), terdapat juga perpustakaan UI untuk Vue yang melaksanakan Reka Bentuk Bahan Google dan turut menyediakan senarai ikon standard: 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

Ini menjimatkan banyak masa pada permulaan projek atau projek yang tidak memerlukan terlalu banyak penyesuaian grafik.

Tetapi seperti biasa, saya syorkan memerhatikan prestasi pemaparan dengan perpustakaan peringkat tinggi jenis ini. Kapasiti konfigurasi perpustakaan selalunya dibayar di tempat lain!

Kesimpulan

Apakah yang boleh kami katakan tentang pengalaman berhijrah dari React ke Vue ini?

Pertama sekali, dari sudut pandangan kod, berbanding dengan React, saya akan mengatakan bahawa Vue lib ialah:

• lebih tersusun;
• lebih deklaratif ;
• lebih ringkas.

Walau bagaimanapun, terima kasih kepada kodnya yang lebih banyak ditulis dalam JSX, saya mendapati bahawa React kekal lebih saling beroperasi, lebih terprogram dan lebih eksplisit daripada Vue, dan dengan kestabilan linter yang lebih baik.

Dari segi persekitaran pembangunan dan komuniti, Vue mempunyai semua kad di tangan untuk saya memastikan pembangunan yang cekap sehingga pengeluaran.

Jadi adakah peningkatan kemahiran pada Vue ini sesuai dengan kemasyhurannya? Saya akan berkata ya. Saya mendapati keluk pembelajaran berkesan dan akan terus berkembang dengan Vue jika ada peluang.

Akhir sekali, adakah lebih baik untuk membangunkan bahagian hadapan dalam Vue hari ini daripada dalam React?
Dari sudut pandangan peribadi, saya fikir tidak. Walaupun Vue dan React masing-masing mempunyai kes aplikasi yang sedikit berbeza, saya lebih suka bergantung pada sistem penaipan yang boleh dipercayai dan kod yang lebih fleksibel dengan React. Tetapi mungkin versi Vue seterusnya dan alatan mereka akan mengubah fikiran saya?

Dan anda, apakah maklum balas anda?

Atas ialah kandungan terperinci Saya cuba beralih kepada Vue.js daripada React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!