1. ag-Grid ma'lumotlarni yangilash muammosi
Amaliy loyiha uchun ishlatiladigan ma'lumotlar jadvali faqat oddiy ko'rish funksiyasini taqdim etadigan holatlar kam uchraydi. Ayniqsa, administrator tizimlari yoki ish uchun mo'ljallangan platformalarda foydalanuvchilar jadval ichida to'g'ridan-to'g'ri ma'lumotlarni tahrirlash yoki holatni o'zgartirish holatlari juda ko'p bo'ladi.
Masalan, ma'lum bir hujayradagi tugmani bosganingizda boshqa qatordagi hisoblash natijalari darhol aks etishi yoki Pinia/Vuex asosidagi global holatga ko'ra ma'lum bir hujayraning UI'si real vaqt rejimida o'zgarishi talabi mavjud.
Loyiha bunday funktsiyalarni amalga oshirish uchun ag-Grid'dan foydalandi. ag-Grid Virtual Scroll asosidagi tuzilma va yuqori samarali renderlash dvigatelini taklif qilgani uchun katta ma'lumotlarni qayta ishlash uchun juda mos keladi. Ammo Vue 3 bilan birga ishlash jarayonida kutmagan renderlash muammolari yuzaga keldi.
- Muammo 1:Bitta selni tahrir qildim, lekin butun jadval Grid qayta chizish muammosi
Vue'ning ref yoki reactive asosidagi rowData'ni to'g'ridan-to'g'ri o'zgartirganda, Vue butun massiv o'zgarishini sezadi. Natijada ag-Grid ichida ham butun qatorning qayta chizilishi yuz berishi mumkin. Ayniqsa, ma'lumot minglardan oshganda ekran bir lahzaga to'xtab qolish holati yuzaga keladi.
- Muammo 2:cellRenderer ichida tashqi holatni ko'rsatganda eng so'nggi qiymatni aks ettirish muammosi
setup ichidagi o'zgaruvchi yoki Pinia holatini ko'rsatganingizda, ag-Grid dastlabki rendering vaqtidagi qiymatni saqlashi mumkin edi. Bu Vue ning reaktiv tizimi va ag-Grid ning komponentni qayta ishlash mantiqi bir-biridan farqli ravishda ishlashi sababli bo'ldi.
- Muammo 3:Render paytida qayta-qayta takrorlanayotgan keraksiz API chaqiruvlari
Ma'lum bir hujayra render qilinganda har safar tashqi funktsiya yoki getter chaqiradigan tuzilmani ishlatsangiz, faqat skroll yoki holat o'zgarishi bilan bir xil API so'rovi va hisoblashlari takroran amalga oshirildi. Natijada, oddiy funktsiyalarni amalga oshirish bilan hal qila olmaydigan samaradorlik va tuzilma muammolari paydo bo'ldi.
2. Ma'lumot muammolari yuzaga kelishining sabablari
Vue 3 Proxy asosidagi reaktiv tizimdan foydalanadi. Oddiy Vue ilovalari uchun juda samarali tuzilishga ega, ammo ag-Grid kabi o'z rendering dvigateliga ega kutubxonalardan foydalanilganda muammolar yuzaga kelishi mumkin. ag-Grid ichki ravishda quyidagi holatlarni mustaqil ravishda boshqaradi.
-
Qator tugun / Yacheya holati / Skroll holati / Tanlov holati / Transaktsiya holati
Ya'ni, Vue va ag-Grid har ikkalasi holatlarni kuzatish va renderingni nazorat qilish tuzilmasiga ega bo'ladi. Ayniqsa rowData ni reaktiv tarzda chuqur kuzatadigan bo'lsak, Vue minglab ma'lumot ob'ektlarini Proxy bilan o'rab, boshqarishi kerak bo'ladi. Bu jarayonda quyidagi muammolar yuzaga keldi.
-
Xotira foydalanish miqdori oshishi
-
Keraksiz renderlash
-
Proxy yaratish xarajatlari
-
Holat kuzatuv xarajatlari oshishi
Shuningdek, ag-Grid Virtual Scroll asosidagi tuzilmani ishlatgani uchun, renderlashtirishni optimallashtirish juda muhimdir, ammo Vue ning haddan tashqari reaktiv kuzatuvi buni to'sqinlik qilishi sodir bo'ldi. Nihoyat, asosiy muammo 'qaysi holatni Vue boshqarishi va qaysi holatni ag-Grid ga topshirishidir'.
3. Hal qilish usuli
① shallowRef asosidagi optimizatsiya
Birinchi yechim rowData ni shallowRef sifatida e'lon qilish edi. Oldin rowData ni e'lon qilish uchun ref yoki reactive dan foydalanganmiz, ammo bu holda Vue ichki ob'ektlarni ham to'liq kuzatadi. Boshqa tomondan, shallowRef ichki ob'ektlar xususiyatlarining o'zgarishini kuzatmaydi. Ya'ni, Vue rowData massivi ishorasini boshqaradi va asl ichki holatni ag-Gridga topshirish uchun vazifalarni ajratish imkonini berdi.
Bu orqali quyidagi effektlarga erishildi.
-
Keraksiz reaktiv kuzatuvni olib tashlash
-
Butun Grid qayta chizish kamaytirildi
-
Xotira sarfi kamaytirildi
-
Rendering samaradorligini oshirish
Xususan, minglab ma'lumotlarni o'z ichiga olgan Grid muhitida samaradorlikni oshirish ta'siri juda katta ko'rinadi. Shuningdek, Virtual Scroll tuzilishi ham ancha ishonchli ishladi. Ushbu tajribadan kelib chiqib, har doim holatni Vue reaktiv tizimiga topshirish to'g'ri degan fikr emasligiga amin bo'ldim. Ba'zida holatni boshqarish mas'uliyatini kutubxonaga topshirish ancha samarali tuzilishga olib kelishi mumkin.
② Maxsus hujayra randeri va tranzaksiya API
Ikkinchi yechim maxsus hujayra randeri va tranzaksiya API-dan foydalanish edi. ag-Grid, Hujayra komponentlarini qayta ishlatish tuzilishiga ega. Boshqacha qilib aytganda, aylantirish paytida barcha komponentlarni yangidan yaratish o'rniga mavjud komponentlarni qayta ishlatadi.
Muammo shundaki, bu jarayonda tashqi holatning ma'lumotlari yangilanmagan bo'lishi mumkin. Buni hal qilish uchun loyiha refresh metodini aniq amalga oshirdi.
Ma'lum bir ma'lumot o'zgarganda, faqat ushbu Cellni qisman qayta chizish uchun tuzilgan. Shuningdek, ma'lumotlarni yangilash usuli ham o'zgartirildi. Avvalgi usulda ma'lumotlarni quyidagi tarzda o'zgartirdik.
-
rowData.value[0].status = ‘Done’
Ammo bu usul Vue va ag-Grid uchun ham samarali tuzilma emas edi. Nihoyat, loyiha ag-Grid ning applyTransaction API ni to'g'ridan-to'g'ri ishlatadigan usulga o'tkazildi.
Transaction API quyidagi ishlarni aniq ko'rsatishi mumkin.
-
add / update / remove
Ushbu tuzilmaning eng katta afzalligi “qismiy yangilash”ni amalga oshirish imkoniyatidir. Ya'ni, butun Gridni qayta render qilmasdan, faqat haqiqatan o'zgartirilgan Rowni yangilash mumkin edi. Natijada quyidagi ta'sirni olishimiz mumkin edi.
-
Render qilish sohasini minimallashtirish
-
Ishlash samaradorligini oshirish
-
Skroll qilish barqarorligini oshirish
-
API chaqiruvini kamaytirish
-
qisman holatni boshqarish mumkin
Xususan katta hajmdagi ma'lumotlar muhitida ushbu farqlar juda katta ko'rinadi.
4. Ishlashni optimallashtirish va dizayn nuqtai nazari
Ushbu muammo yechish jarayonida eng katta sezilgan narsa, frontend ish faoliyatini optimallashtirish oddiy kod o'zgarishi emas, balki 'loyihaning muammosi' ekanligidir. Vue'ning reaktiv tizimi juda kuchli va qulaydir.
Ammo ag-Grid kabi o'zining barcha renderlash dvigateliga ega bo'lgan kutubxonalar bilan birgalikda bo'lganda, holatni boshqarish mas'uliyati takrorlanib, aslo ish faoliyatida muammolar yuzaga kelishi mumkin. Nihoyat, muhim narsa quyidagi savol edi.
-
Qanday holatni Vue boshqaradi.
-
Qanday holatni ag-Grid'ga topshiradi.
-
Qayergacha reaktiv tarzda kuzatamiz.
-
Qanday o'zgarishlarni tranzaksiya sifatida qayd etamiz.
Ya'ni, ramka va kutubxonalar o'rtasidagi rol ajratilishi muhim edi. Shuningdek, ushbu tajriba orqali oddiy funktsiyani amalga oshirishdan ko'ra ichki ishlash tamoyillarini tushunish juda muhimligini his qildim.
5. Yakun
Bu ag-Grid unumlarini optimallashtirish tajribasi oddiy xatolarni tuzatishdan ko'ra ko'proq ma'noga ega bo'ldi. Dastlab bu oddiy render muammosi kabi ko'rinardi, lekin aslida Vue reaktiv tizimi va ag-Grid renderizatsiya dvigateli o'rtasidagi strukturalararo to'qnashuv muammosi edi. Ayniqsa, quyidagi elementlarni chuqur tajriba qilish imkoniyatiga ega bo'ldim.
-
Katta hajmdagi ma'lumotlarni renderlash tuzilishi
-
Moshtarak tizimning afzalliklari va kamchiliklari
-
Transaction asosida holatni boshqarish
-
Kutubxona va freymvork rollarini ajratish
-
Virtual Scroll optimallashtirish
Engil muhim “frameworkga nima topshirish va nima kutubxonaga topshirish kerakligini” hal qilish dizaynining ahamiyatini kuchli his qildim. Nihoyat, bu tajriba oddiy Vue yoki ag-Grid foydalanish tajribasidan chiqib, katta hajmdagi frontend muhitida ishlash samaradorligi dizayni va holat boshqarish tuzilmasini chuqur tushunishga imkon bergan juda ma'noli tajribadir.
<Manba>
- ag-Grid rasmiy hujjati (https://www.ag-grid.com/vue-data-grid/getting-started/]
- Vue rasmiy hujjati (https://ko.vuejs.org/api/reactivity-advanced)
lucy