VueJs koos tavaliste JavaScripti teekidega

Joel Edenberg

Kasutades VueJs raamistikku komistasin hiljuti ühe väga huvitava probleemi otsa. Nimelt kui kasutada MapBox teeki, mis on mõeldud tavalise JavaScripti jaoks, siis tekkisid veidrad probleemid. Esmapilgul tundus kõik toimivat ja kaart kuvati õigesti. Samuti oli võimalik redigeerida kaardil kuvatavaid elemente, ning kõik tundus toimivat nagu peab. Kui aga navigeeruda mõnele teisele alamlehele, kus kaardikomponent puudus, ning seejärel tulla tagasi kaardi vaatele, siis ei suudetud enam kaarti korrektselt kuvada. Kaduma läks kaardi taust, ning kaardi lisatud elemendid ei olnud enam interaktiivsed.

Peale pikka uurimist selgus, et VueJs elementide automaatne reaktiivsus (igale väärtusele lisatakse getterid ja setterid) hakkas segama MapBox teegi sisemist loogikat. Seega mõistlik järeldus tulevikuks - kui kasutada JavaScripti teeke, mis ei ole ehitatud spetsiaalselt VueJs jaoks, siis tuleks hoida teekides pakutavad objektid mitte-reaktiivsetena. See tähendab, et neid objekte ei tohiks omistada data või property sektsioonis defineeritud väljadele. Selle asemel tuleks salvestada muutuvajd otse VueJs komponendi külge kasutades this viidet ja hoides nad eemal automaatsest Vue reaktiivsusest.