A Vuejs 3.4 legjobb újdonsága a defineModel
Az új Vuejs 3.4 verzió egyik legérdekesebb és legjobb újdonsága a defineModel, amely lehetővé teszi a fejlesztők számára, hogy egyszerűen definiálják és kezeljék az adatmodelleket a komponenseikben.
A defineModel segítségével könnyedén lehet az adatmodelleket inicializálni, validálni, és kezelni, anélkül hogy sok kódra lenne szükségünk hozzá. Ez a funkció különösen hasznos lehet nagyobb projektekben, ahol sok különböző komponensben kell kezelni az adatmodelleket.
Példaként, ha egy űrlapon szeretnénk egy felhasználónak lehetőséget adni arra, hogy beállítsa a nevét és az email címét, akkor egyszerűen definiálhatjuk az adatmodelleket a következő módon:
defineModel({
name: {
type: String,
required: true
},
email: {
type: String,
required: true,
validate: (value) => /^[^s@]+@[^s@]+.[^s@]+$/.test(value)
}
})
Ezután csak hivatkozni kell ezekre az adatmodellekre a Vue komponensünkben, és automatikusan el lesznek indítva a validációk és az inicializációk.
A defineModel funkcióval lehetőségünk van továbbá a különböző típusok megadására, mint például a String, Number, Object, Array, stb. Ez segíti a kódunk nagyobb és könnyebben olvasható lettét.
Összességében, az új Vuejs 3.4 defineModel funkciója nagyban segít a fejlesztőknek a könnyű és hatékony adatkezelésben, és egy fontos új fejlesztés a Vuejs keretrendszerben.
Az nagyon igaz, ha valaki kipróbálja a <script setup> szintaktikát, akkor nem fog akarni mást. Nálam gond az vol, hogy utána gyűlöltem a régebbi kódjaimat, átláthatatlan maszlagnak tűnt ezután… kényszeresen mindet át akartam írni… 😎 sok munka volt, de most már jobb. 🤣 Egyébként ha ref helyett reactive volt a változó és azt adtam meg a prop-ba akkor azt nem kellett vissza emit-telni, de valóban jó ez a defineModel cucc. Jó lett a videó! 👍🤟