Vue.js: yaxshi, meh va chirkin

Ikki yil o'tgach, React-dan Vue-ga o'tish

Yangi ramkalar va kutubxonalarni yig'ish juda hayajonli, ammo stressli. Hatto ba'zi bir baholanishdan keyin ham yo'lda qanday skeletlarni topmoqchi ekanligingizni hech qachon bilmaysiz.

Mening oy oyim tugadi. Deyarli har kuni Vue-dan foydalanganimdan so'ng, men bu haqda biron bir nuqtai nazar bilan yoza olaman.

XAVF: Oldinda fikrlar.

Yaxshi

Reaktivlik

Ma'lumotni bog'lab qo'yish dunyoning oldingi qismida katta ish. DQM-ni jQuery-da bo'lgani kabi, mikromanaj qilishning o'rniga biz endi ma'lumotlarga e'tibor qaratmoqdamiz. Vue bu ma'lumotni ikki tomonlama reaktiv ma'lumotlarni bog'laydigan tizim yordamida yaxshilab ishlaydi.

Ushbu reaktivlikka erishish uchun Vue o'zgarishni kuzatishi va DOM-ni avtomatik ravishda yangilay oladigan (yo'tal this.setState () yo'tal) holatini o'zgartiradigan holatiga har bir o'zgaruvchiga bir qator kirishuvchi va sozlagich qo'shadi. Ushbu yondashuv mukammal emas, buni keyinroq ko'rib chiqamiz.

Batareyalar kiritilgan

Vue bilan dasturning muhim qismlari uchun MobX yoki React Router kabi norasmiy paketlarga murojaat qilishning hojati yo'q. Vue Vue Router va Vuex-ni Redux-dan ilhomlangan reaktiv markaziy davlat menejeri bilan ta'minlaydi. Bu o'z-o'zidan katta kutubxonalar, ammo ularning Vue uchun maxsus yaratilganligi ularni yanada yaxshilaydi.

Tezlik

Vue haqiqatan ham tez. Ehtimol, eng tezkor emas, lekin veb-loyihalarning aksariyati uchun uning ishlashi ortiqcha. Sekundiga minglab DOM elementlarini namoyish qilish va yangilash uchun oxirgi marta qachon kerak edi?

HTML andozalari

Bu JavaScript ishlab chiquvchilari o'rtasida ajratuvchi mavzu. Siz xohlaganingizdan qat'iy nazar, HTML shablonlari o'nlab yillar davomida ko'plab tillarda sinovdan o'tgan va Vue-da dinamik belgilarni yozish uchun asosiy tanlovdir.

Ammo Hey, Vue JSX-ni ham qo'llab-quvvatlaydi.

Boshqa sovg'alar

  • HTML, CSS va JavaScript bilan bitta fayl komponentlari.
  • Engil. Taxminan 20KB (minifikatsiya qilingan + gzip).
  • Juda kengaytiriladigan (aralashmalar, plaginlar va boshqalar).
  • Ajoyib hujjatlar (quyida keltirilgan ba'zi istisnolar bilan).
  • Asta-sekin qabul qilinishi mumkin, hatto jQuery o'rnini bosuvchi sifatida ham ishlatilishi mumkin.
  • Ishni boshlash oson.

Meh

Komponentli qozonxona

React-dan Vue-ga o'tish toza havo nafasi kabi ko'rinadi. Endi hamma joyda bog'lamang (bu) yoki setState (). Vajjaj! Ammo bir muncha vaqt o'tgach, siz Vue tarkibiy sintaksisining haqiqiyligiga shubha qila boshlaysiz.

Vue komponentalari ob'ektlar yordamida yaratilgan va komponent funktsiyasini aniqlashga misol:

standart eksport {
 usullari: {
  o'sish () {
   this.count ++;
  }
 }
}

Hisoblangan xususiyatlar, tarkibiy holatlar, kuzatuvchilar va hokazolar uchun siz shunga o'xshash qozonlarni qo'shasiz. Vue-da juda ko'p narsaning o'ziga xos sintaksisi ko'proq qozonli qozonga ega.

Bundan farqli o'laroq, Marko uchun bu eng toza narsa:

sinf {
 o'sish () {
  this.state.count ++;
 }
}

Mening fikrim bu darslarni ishlatish yoki qilmaslik bilan bog'liq emas, lekin Vue til xususiyatlari o'rniga o'zboshimchalik bilan ob'ekt tuzilmalaridan foydalanmoqda.

Agar siz bu zerikarli narsalarni yaratishga ozgina ifloslik his qilsangiz, men sizni ayblamayman. Vue, shuningdek, sinfga asoslangan sintaksisni ham taklif qiladi, ammo bu haqiqatan ham keyingi fikr.

Chatga asoslangan hamjamiyat

Vue hamjamiyati geymer jamoalari uchun mo'ljallangan "Discord" suhbatida qatnashadi. Agar siz yo'l to'sig'iga tegsangiz, bu sizning eng yaxshi garovingizdir, chunki rasmiy forumlar kimsasiz erdir va Githubda savol berishga jur'at etolmaysiz.

Chatlar notinch, ammo asosiy muammo shundaki, suhbat tarkibini qidiruv tizimlari indekslay olmaydi. Xuddi shu savollar (va u bilan bog'liq munozaralar) qayta-qayta takrorlanishi kerak.

Savollar uchun chatlardan foydalanishning ushbu tendentsiyasi ochiq manbali loyihalarni xavf ostiga qo'yadi va menimcha, tugatish kerak. Endi kollektiv o'rganish yo'q.

Unchalik sehrli emas

Oltin yo'ldan uzoqlashmasangiz, hammasi yaxshi bo'ladi, lekin bir muncha vaqt o'tgach, Vue atrofida ko'plab kichik iffalar va butalarni topasiz.

Ba'zi misollar:

  • Reaktivlik tizimi faqat ma'lum sharoitlarda o'zgarishlarni kuzatib boradi. O'zingiz xohlagan narsani tashlashni kutmang. Ko'pincha bosh og'rig'ining oldini olish uchun ma'lumotni iloji boricha tekislash kerak bo'lishi mumkin. Albatta, bularning barchasi hujjatlarning nozik nashrida tushuntirilgan.
  • O'tish tizimi ro'yxatlar uchun ishlamaydi. Siz aslida boshqacha ishlaydigan va DOM-ga yangi elementlarni kiritadigan dan foydalanishingiz kerak. Bundan tashqari, kimdir ajablantiradigan narsa hal qilinishini kutish mumkin edi, lekin uni o'zingiz amalga oshirishingiz kerak.
  • Agar tarkibiy qismda siz reaktiv bo'lmagan holatga muhtoj bo'lsangiz, siz o'zgarmas hududga kirasiz.

Va boshqalar.

Meni noto'g'ri qabul qilmang, bular sotuvchilar emas, lekin har safar yuzingizni tirnalganingizda, yana bir kichik bezovtalik paydo bo'ladi.

Xunuk

Noma'lum me'moriy naqshlar

Mana misol: API so'rovlarini komponentlaringizda yoki Vuex-da ko'rib chiqish yaxshiroqmi?

Hujjatlar Vuex-da API mantig'ini qanday bajarish haqida misollar keltiradi. Hatto chiroyli va rang-barang diagramma ham mavjud:

Bu autentifikatsiya mantig'i Vuex-da ham degan ma'noni anglatadimi? Endi davlat menejeri barcha ilovalar mantig'ida vositachilik qilishni boshlaydimi?

Bu aniq masalalar emas. Aksariyat odamlar Vuex harakatlariga nodavlat mantiqlarini yopishtirishni boshlaydilar yoki undan ham yomoni, to'g'ridan-to'g'ri tarkibiy qismlarga qo'shilishadi, chunki Vue-ning bosh sahifasida shunday video bor:

Mening dastlabki savolimga javob berish uchun: API mantig'i Vuex-da yoki tarkibiy qismlarda yozilmasligi kerak. Hatto rasmiy kodning ba'zi misollarida buni qanday qilish haqida yaxshi misol mavjud.

Xulosa

Vue-ning qabul qilinishi doimiy ravishda o'sib bormoqda va men bu tendentsiya yaqin orada to'xtashiga shubha qilaman. React-dan hali ham uzoqroq (hech bo'lmaganda Xitoy tashqarisida) va Angular bilan doimiy ravishda ikkinchi o'rin uchun kurashmoqda.

Ilgari men Vue haqiqatan ham ideal ko'rinadigan ("Biz toza JavaScript!") Farqli o'laroq, pragmatik kutubxona ekanligi haqida bahslashdim. Menimcha, bu yaxshi metafora. Boshqa tomondan, endi men Vue-ning hamma narsasi borligini his qilaman - bu pragmatizm uchun foydalanuvchi darajasida ko'proq jilo, e'tibor, nafosat va soddalik kerak.

2 yildan keyin Vue bilan bo'lgan tajribam ijobiy bo'ldi. Mening jamoamni "React" dan "Vue" ga o'tkazish to'g'ri qaror bo'lganiga aminman. Vue yaxshiroq bo'lgani uchun emas, balki u biz uchun yaxshiroq mos bo'lgani uchun.

Vue, albatta, rejalashtirilgan ishni bajaradi va boshqalar muvaffaqiyatsiz bo'lgan sohalarda muvaffaqiyat qozonadi, ammo bugungi kunda men Vue sizning radaringizdagi boshqa variantlarga qaraganda ob'ektiv ravishda yaxshiroq yoki yomonroq deb o'ylamayman.

Bu hammasi.

Qo'shimcha: CLIni almashtirish

Men ushbu maqolaga Vue CLI-ni maqsadga muvofiq ravishda kiritmaganman va nega buni tushuntirib bermoqchiman.

Vue CLI - bu Vue loyihalarini iskala qilish uchun juda qulay vosita. Yaqinlashib kelayotgan 3-chi versiyada bu yanada yaxshi bo'ladi, chunki bu loyihani boshqarishning to'liq echimi.

Ammo, qulaylik har doim qimmatga tushadi va mening fikrimcha, bu narx bu erda oqlanmaydi. Veb-paketni yaratish ko'pchilik talab qiladigan darajada qiyin emas va o'zingizning boshlang'ich to'plamingizni yaratish konfiguratsiya vaqtining ko'p qismini engillashtiradi.

O'zingizning buyurtma asosida yasalgan narsangizni yasash, agar xarajat juda past bo'lsa, yanada mazmunli bo'ladi.