Vue.js-ni keyingi takrorlash rejalari

O'tgan hafta Londonning Vue.js ko'rgazmasida men Vue-ning navbatdagi katta versiyasida nima bo'lishini qisqacha aytib berdim. Ushbu post reja haqida batafsil ma'lumot beradi.

Nima uchun yangi asosiy versiya?

Vue 2.0 aynan ikki yil oldin chiqarilgan (vaqt qanday uchadi!). Ushbu davrda yadro beshta kichik nashrga mos ravishda orqada qoldi. Biz yaxshilanishga olib keladigan bir qator g'oyalarni to'pladik, ammo ular o'zgarishga olib kelishi mumkinligi sababli to'xtatildi. Shu bilan birga, JavaScript ekotizimi va tilning o'zi juda tez rivojlandi. Bizning ish oqimimizni kuchaytiradigan juda ko'p yaxshilangan vositalar mavjud va Vue hal qilmoqchi bo'lgan muammolarni sodda, to'liq va samaraliroq echimini ochadigan ko'plab yangi til xususiyatlari. Eng qizig'i shundaki, biz ES2015 qo'llab-quvvatlashi doimo doimiy yashillarning asosiy brauzerlari uchun asos bo'lib qolmoqda. Vue 3.0 Vue yadrosini kichikroq, tezroq va kuchliroq qilish uchun ushbu yangi til xususiyatlaridan foydalanishga qaratilgan.

Hozirgi 3.0 Vue prototiplash bosqichidadir va biz ish vaqtini xususiyat-paritetga yaqin 2.x bilan amalga oshirdik. Quyida sanab o'tilgan narsalarning aksariyati allaqachon bajarilgan yoki bajarilishi tasdiqlangan. Hali ham amalga oshirilmagan yoki qidiruv bosqichida bo'lganlar * bilan belgilangan.

Tafsilotlar

Yuqori darajadagi API o'zgarishlar

TL; DR: renderlash funktsiyasidan tashqari va sloped-slots sintaksisidan tashqari hamma narsa o'zgarmaydi yoki moslashuvni qurish orqali 2.x ga moslash mumkin.

Bu yangi magistratura bo'lganligi sababli, keskin o'zgarishlar bo'lishi kerak. Biroq, biz orqaga qarab muvofiqlikni jiddiy qabul qilamiz, shuning uchun biz ushbu o'zgarishlar haqida iloji boricha tezroq xabar berishni xohlaymiz. Bu erda rejalashtirilgan ommaviy API o'zgartirishlari:

  • Andoza sintaksisi 99% bir xil bo'lib qoladi. Yopiq uyalar sintaksisida mayda chayqalishlar bo'lishi mumkin, ammo bundan tashqari shablonlar uchun boshqa biron narsani o'zgartirish rejamiz yo'q.
  • ̶3̶.̶0̶ ̶w̶i̶l̶l̶ ̶s̶u̶p̶p̶o̶r̶t̶ ̶c̶l̶a̶s̶s̶-̶b̶a̶s̶e̶d̶ ̶c̶o̶m̶p̶o̶n̶e̶n̶t̶s̶ ̶n̶a̶t̶i̶v̶e̶̶̶̶̶ Yangilanish: Class API qoralamasi olib tashlandi. Biz mantiqiy kompozitsiyani, TypeScript-ni yaxshiroq qo'llab-quvvatlaydigan va 2.x API-ga mos keladigan yangi funktsiyaga asoslangan API taklifini e'lon qildik.
  • Aralashmalar hali ham qo'llab-quvvatlanadi. *
  • Plaginlarni o'rnatishda Vue ish vaqtini global darajada o'zgartirmaslik uchun yuqori darajadagi API-lar, ehtimol, mukammal ta'mirdan o'tadilar. Buning o'rniga plaginlar qo'llaniladi va komponentlar daraxtiga taqsimlanadi. Bu ma'lum plaginlarga ishonadigan tarkibiy qismlarni sinovdan o'tkazishni osonlashtiradi va turli xil plaginlar yordamida bir xil Vue dasturlarini bir xil o'rnatishga imkon beradi, lekin bir xil Vue ish vaqtidan foydalanib. * (Yangilash: tegishli RFC)
  • Funktsional komponentlar oxir-oqibat aniq funktsiyalar bo'lishi mumkin - baribir, async tarkibiy qismlari aniq yordamchi funktsiyasi yordamida yaratilishi kerak. (Yangilash: RFC bilan bog'liq)
  • Ko'proq o'zgarishni oladigan qism bu Virtual DOM formatidir, bu funktsiyalarda ishlatiladi. Hozirda biz kutubxonaning yirik mualliflaridan fikr-mulohazalarni yig'moqdamiz va bu haqda ko'proq ma'lumotga ega bo'lamiz, chunki biz o'zgarishlarga aminmiz, lekin qo'lingiz bilan yozilgan (JSX bo'lmagan) ilovangizning funktsiyalariga to'liq ishonmasangiz, yangilaysiz. oqilona va to'g'ri jarayon bo'lishi kerak.

Manba kodi arxitekturasi

TL; DR: ajratish osonroq bo'lgan ichki modullar, TypeScript va kodlar bazasi.

Biz toza va barqaror arxitekturani yaratish uchun 3.0-ni qayta yozmoqdamiz, xususan o'z hissasini qo'shishni osonlashtirish uchun. Murakkablik doirasini ajratish uchun biz ba'zi ichki funktsiyalarni individual paketlarga ajratmoqdamiz. Masalan, kuzatuvchi moduli o'zining shaxsiy API va testlariga ega bo'lgan o'z to'plamiga aylanadi. E'tibor bering, bu API darajasidagi darajaga ta'sir qilmaydi - Vue-dan foydalanish uchun siz bir nechta paketlardan alohida bitlarni qo'lda import qilishingiz shart bo'lmaydi. Buning o'rniga, yakuniy Vue to'plami ushbu ichki paketlardan foydalangan holda yig'iladi.

Kod bazasi endi TypeScript-da yozilgan. Garchi bu TypeScript-ni bilishni yangi kodlar bazasiga hissa qo'shish uchun zaruriy shartga aylantirsa ham, biz ishonamizki, turdagi ma'lumotlar va IDE qo'llab-quvvatlashi yangi hissa qo'shuvchiga muhim hissa qo'shishni osonlashtiradi.

Kuzatuvchi va rejalashtirgichni alohida paketlarga ajratish, shuningdek, ushbu qismlarni muqobil amalga oshirishda osongina tajriba o'tkazishga imkon beradi. Masalan, IE11-ga mos keladigan kuzatuvchini xuddi shu API bilan yoki uzoq yangilanish paytida brauzerga berish uchun requestIdleCallback-dan foydalanadigan alternativ rejalashtirishni amalga oshirishimiz mumkin. *

Yangi manba kodi tuzilmasining hiyla-nayrangi (o'zgartirish kerak)

Kuzatish mexanizmi

TL; DR: yanada to'liq, aniq, samarali va tuzatilishi mumkin bo'lgan reaktivlikni kuzatish va kuzatiladiganlarni yaratish uchun API.

3.0 to'liq proksi-server kuzatuvchisi bilan ta'minlanadi, u to'liq til qamrovi bilan reaktivlikni kuzatishni ta'minlaydi. Bu Object.defineProperty-ga asoslangan Vue 2-ning joriy bajarilishidagi bir qator cheklovlarni bekor qiladi:

  • Mulkni qo'shish / yo'q qilishni aniqlash
  • Array indekslari mutatsiyasini / .length mutatsiyasini aniqlash
  • Map, Set, WeakMap va WeakSet-ni qo'llab-quvvatlash

Yangi kuzatuvchi shuningdek quyidagilarga ega:

  • Kuzatiladiganlarni yaratish uchun ochilgan API. Bu kichik va o'rta darajadagi stsenariylar uchun engil vaznli, o'lik oddiy oddiy komponentli davlat boshqaruvi echimini taklif qiladi.
  • Sukut bo'yicha kuzatuv. 2.x-da har qanday reaktiv ma'lumotlar, ishga tushirish paytida qanchalik katta bo'lishidan qat'i nazar, kuzatiladi. Agar ma'lumotlar to'plamingiz juda katta bo'lsa, bu ilovalarni ishga tushirishda sezilarli darajada oshib ketishiga olib kelishi mumkin. 3.x-da, faqat ilovangizning ko'rinadigan qismini ko'rsatish uchun ishlatiladigan ma'lumotlarga rioya qilish kerak, ammo kuzatuvning o'zi ham ancha tezroq.
  • O'zgarishlar haqida aniqroq bildirishnoma. Masalan: 2.x-da Vue.set-dan foydalanib yangi mulkni qo'shishga majbur qilish ob'ektga bog'liq bo'lgan har qanday tomoshabinni qayta baholashga olib keladi. 3.x-da, faqat ushbu xususiyatga ishongan tomoshabinlar xabardor qilinadi.
  • O'zgarib bo'lmaydigan kuzatiladigan narsalar: biz tizimning ichki qismida vaqtincha blokirovka qilinadigan holatlardan tashqari, hatto o'rnatilgan xossalarda ham mutatsiyaning oldini oladigan qiymatning "o'zgarmas" versiyasini yaratishimiz mumkin. Ushbu mexanizmni mutatsiyalardan tashqarida pastga tushadigan rekvizitlar yoki Vuex shtat daraxtlarini muzlatish uchun ishlatish mumkin.
  • Nosozliklarni tuzatishning yaxshi imkoniyatlari: biz yangi renderTracked va renderTriggered kancalaridan foydalangan holda tarkibiy qismlarni qayta ko'rsatish qachon va nima sababdan aniqlanganligini aniq kuzata olamiz:
Nima uchun tarkibiy qism qayta namoyish qilinayotganligini oson tushuning

Boshqa vaqtni takomillashtirish

TL; DR: kichikroq, tezroq, daraxtni silkitadigan xususiyatlar, parchalar va portallar, maxsus renderer API.
  • Kichikroq: yangi kod bazasi erdan daraxtlarga tegadigan do'stona qilib yaratilgan. O'rnatilgan komponentlar (, ) va ish vaqtini boshqarish bo'yicha yordamchilar (v-model) kabi xususiyatlar endi talabga binoan va daraxtlar tomonidan o'zgartirilishi mumkin. Yangi ish vaqti uchun doimiy bazaviy o'lcham <10 kb tezlashtiriladi. Bundan tashqari, daraxtni silkitadigan xususiyatlar, shuningdek, ularni ishlatmayotgan foydalanuvchilarga qo'shimcha ravishda jarimalar solmasdan, yo'l bo'ylab o'rnatilgan qo'shimcha funktsiyalarni taklif qilishimizga imkon beradi.
  • Tezroq: dastlabki ko'rsatkichlarda biz 100% gacha yaxshilanishni, shu jumladan Virtual DOM-ning montaji va tuzatilishini (biz Inferno-dan juda ko'p fokuslarni bilib oldik, bu erda Virtual DOM-ning eng tezkor amalga oshirilishini), komponentlar initsializatsiyasining boshlanishi va ma'lumotlar kuzatuv. 3.0-da JavaScript yuklangan vaqtning yarmi sizning ilovangiz ishga tushganda qisqaradi.
  • Fragmentlar va portallar: hajmning qisqarishiga qaramay, 3.0 Fragmentlar (bir nechta ildiz tugunlarini qaytaruvchi komponent) va portallar (komponentning ichida emas, balki DOM-ning boshqa qismida pastki daraxtni namoyish qilish) uchun qo'llab-quvvatlanadi.
  • Yaxshilangan uyalar mexanizmi: Barcha kompilyator tomonidan yaratilgan uyalar endi vazifalarni bajaradi va bolalar komponentining qo'ng'iroq paytida chaqiriladi. Bu uyalardagi qaramlik ota-onaning o'rniga bolaga qaramlik sifatida yig'ilishini ta'minlaydi. Bu shuni anglatadiki: 1. uyaning tarkibi o'zgarganda, faqat bola qayta ishlaydi; 2. Ota-ona qaytganda, agar uning uyasi tarkibi o'zgarmasa, bolaga shart bo'lmaydi. Ushbu o'zgartirish tarkibiy daraxtlar darajasida yanada aniqroq aniqlanishni taklif qiladi, shuning uchun kamroq foydalidir!
  • Custom Renderer API: Custom rendererlarni yaratish uchun birinchi darajali API mavjud bo'ladi va endi Vue kod bazasini maxsus o'zgartirishlar bilan talab qilinmaydi. Bu Weex va NativeScript Vue kabi mahalliy dasturlarni oqim oqimlari bilan dolzarb bo'lib qolishini osonlashtiradi. Shuningdek, bu boshqa maqsadlar uchun maxsus xizmat ko'rsatuvchilarni yaratishni osonlashtiradi.

Kompilyatorni takomillashtirish *

TL; DR: daraxtni silkitadigan do'stona chiqish, ko'proq AOT optimallashtirish, xato ma'lumotlari yaxshiroq bo'lgan tahlil va manbalarni xaritada qo'llab-quvvatlash.
  • Daraxtlarni silkitishga qodir bundlerlarni nishonga olganda, ixtiyoriy funktsiyalardan foydalanadigan shablonlar ushbu modullarni ES modullari sintaksisidan foydalanib import qiluvchi kodni yaratadi. Foydalanilmagan ixtiyoriy xususiyatlar shu tariqa oxirgi to'plamdan chiqarib tashlanadi.
  • Virtual DOM-ning yangi tatbiq etilishi tufayli biz shuningdek vaqtni optimallashtirishni amalga oshirishimiz mumkin: statik daraxtlarni ko'tarish, statik rekvizitlarni ko'tarish, bolalarni normallashtirishni o'tkazib yuboradigan ish vaqti uchun kompilyator-ko'rsatmalar, VNode yaratish tez yo'llari va boshqalar ...
  • Biz shablonni tuzishda xatolarda joylashuv ma'lumotlarini taqdim qilish uchun tahlilni qayta yozishni rejalashtirmoqdamiz. Bu shuningdek shablonlarni manba xaritasini qo'llab-quvvatlashga olib kelishi kerak va yangi tahlil qiluvchi eslint-plugin-vue va IDE til xizmatlari kabi uchinchi tomon vositalarini birlashtirish uchun asos bo'lib xizmat qilishi mumkin.

IE11-ni qo'llab-quvvatlash *

TL; DR: qo'llab-quvvatlanadi, lekin Vue 2.x ning bir xil reaktivligi cheklangan alohida inshootda.

Hozirda yangi kod bazasi faqat doimiy yashovchilarga qaratilgan va asosiy ES2015 qo'llab-quvvatlashini oladi. Ammo, afsuski, biz ko'p foydalanuvchilarimiz kelajakda IE11-ni qo'llab-quvvatlashlari kerakligini bilamiz. Ko'p ishlatiladigan ES2015 funktsiyalari, proksi-serverlar bundan mustasno, IE11 uchun ko'paytirilishi / ko'paytirilishi mumkin. Bizning rejamiz bir xil API bilan muqobil kuzatuvchini amalga oshirishdir, ammo yaxshi eski ES5 Object.defineProperty API-ni ishlatib. Vue 3.x-ning alohida tuzilishi ushbu kuzatuvchidan foydalangan holda tarqatiladi. Biroq, ushbu tuzatish Vue 2.x o'zgarishini aniqlaydigan bir xil o'zgarishlarga duch keladi va shuning uchun 3.x.ning "zamonaviy" tuzilishiga to'liq mos kelmaydi. Biz bilamizki, bu kutubxona mualliflari uchun ba'zi noqulayliklar tug'diradi, chunki ular ikki xil qurilish uchun moslik to'g'risida xabardor bo'lishlari kerak, ammo biz ushbu bosqichga etib borganimizda aniq ko'rsatmalar berishga ishonch hosil qilamiz.

U erga qanday etib boramiz

Birinchidan, biz bugun e'lon qilsak ham, bizda aniq jadval mavjud emas. Ayni paytda biz biladigan narsa bu erga borish uchun qilinadigan qadamlar:

1. Runtime prototipi uchun ichki aloqa

Bu bizning hozirgi bosqichimiz. Hozirgi vaqtda bizda yangi kuzatuvchi, Virtual DOM va komponentlarni joriy etishni o'z ichiga olgan ish vaqti prototipi mavjud. Biz ichki o'zgarishlar haqida fikr bildirish uchun nufuzli jamoatchilik loyihalari mualliflarini taklif qildik va oldinga siljishdan oldin ularning o'zgarishlariga mos ekanligiga ishonch hosil qilishni xohlaymiz. Biz ekotizimdagi muhim kutubxonalar 3.0-ni chiqarganimizda bir vaqtning o'zida tayyor bo'lishiga ishonch hosil qilishni istaymiz, shunda ushbu loyihalarga ishongan foydalanuvchilar osongina ko'tarilishi mumkin.

2. RFC orqali ommaviy fikr

Biz yangi dizaynga ma'lum darajada ishonch hosil qilganimizdan so'ng, har bir o'zgarish uchun biz maxsus RFC ochilishini ochamiz, unga quyidagilar kiradi:

  • O'zgarish doirasi;
  • O'zgarish haqida fikr yuritish: biz nimaga erishmoqdamiz va qanday savdo qilmoqdamiz;
  • Yangilanish yo'li: bu butunlay orqaga mos keladigan tarzda, olinadigan moslik qatlami yoki kodemodlar orqali kiritilishi mumkinmi?

Ushbu g'oyalarni birlashtirishga yordam berish uchun biz keng jamoatchilikning fikrlarini kutamiz.

2.x va 2.x-keyingi qatorlarda mos xususiyatlarni tanishtiring

Biz 2.x haqida unutmaymiz! Aslida, foydalanuvchilarni yangi o'zgarishlarga asta-sekin ko'niktirish uchun 2.x-dan foydalanishni rejalashtirmoqdamiz. Biz tasdiqlangan API o'zgartirishlarini asta-sekin adapterlar orqali 2.x-ga asta-sekin kiritamiz va 2.x-key foydalanuvchilarga yangi Proksiga asoslangan kuzatuvchini sinab ko'rish imkoniyatini beradi.

2.x-dagi so'nggi kichik versiya LTS bo'ladi va 3.0 chiqqandan so'ng 18 oy davomida xato va xavfsizlik tuzatishlarini olishni davom ettiradi.

4. Alfa fazasi

Keyinchalik, biz kompilyatorni va 3.0-ning qismlarini ko'rsatishni yakunlaymiz va alfa-relizlar qilishni boshlaymiz. Bular asosan kichik yashil maydondagi ilovalarda barqarorlikni tekshirish maqsadida bo'ladi.

5. Beta-faza

Beta bosqichida bizning asosiy maqsadimiz Vue Router, Vuex, Vue CLI, Vue DevTools kabi qo'llab-quvvatlanadigan kutubxonalar va vositalarni yangilash va yangi yadro bilan muammosiz ishlashiga ishonch hosil qilish. Shuningdek, biz jamoaning asosiy kutubxona mualliflari bilan 3.0-ga tayyor bo'lishlariga yordam berish uchun ishlaymiz.

6. RC bosqichi

API va kodlar bazasini barqaror deb hisoblaganimizdan so'ng, RC fazasini API muzlatish bilan kiritamiz. Ushbu bosqichda biz "compat build" ustida ishlaymiz: 2.x API uchun moslik qatlamlarini o'z ichiga olgan 3.0-ning tuzilishi. Ushbu tuzilish, shuningdek, sizning ilovangizda 2.x API foydalanish uchun amortizatsiya to'g'risida ogohlantirishlarni yuborishingiz mumkin bo'lgan bayroq bilan ta'minlanadi. Compat build dasturini 3.0 ga yangilash uchun qo'llanma sifatida foydalanish mumkin.

7. IE11 qurish

Yakuniy nashrdan oldingi so'nggi vazifa yuqorida aytib o'tilganidek IE11 muvofiqligini yaratishdir.

8. Yakuniy nashr

Rostini aytsam, bu qachon sodir bo'lishini biz bilmaymiz, lekin ehtimol 2019 yilda. Shunga qaramay, biz aniq sanalarni emas, balki mustahkam va barqaror narsalarni etkazib berish haqida ko'proq qayg'uramiz. Bajarilishi kerak bo'lgan juda ko'p ish bor, lekin biz bundan keyin nima kutayotganimizdan xursandmiz!