Uploaded byAndrea Campaci
Vue3: nuove funzionalità, differenze e come migrare
The document outlines the features and improvements of Vue.js 3, highlighting its performance enhancements, reduced bundle size, and new APIs such as the Composition API. It discusses changes in application creation, component registration, and life cycle hooks, emphasizing the benefits of a more modular and efficient coding approach. Additionally, it addresses TypeScript support and migration recommendations for users transitioning to the latest version.
More Related Content
![[DevDay2019] Micro Frontends Architecture - By Thang Pham, Senior Software En...](https://cdn.slidesharecdn.com/ss_thumbnails/microfrontendsarchitectureedit-190410074045-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Vue3: nuove funzionalità, differenze e come migrare
Vue3: nuove funzionalità, differenze e come migrare
- 2.
- 3. Andrea Campaci Chi sono? ITTechnical Architect //andreacampaci.it info@andreacampaci.it
- 4.
- 5. Cos’è VueJs? The ProgressiveJavaScript Framework
- 6. I punti diforza Framework Javascript di dimensioni ridotte Curva di apprendimento molto bassa Approccio Component Base come React Flessibile Typescript o JS CSS o SCSS o LESS Reattivo HTML o Render functions o JSX Cos’è VueJs?
- 7. Crescita di interesse🚀 Cos’è VueJs? https://www.gurutechnolabs.com/top-front-end-frameworks/
- 8. Crescita sull’utilizzo 📈 Cos’èVueJs? https://2019.stateofjs.com/front-end-frameworks/
- 9.
- 10. Core Changes https://increment.com/frontend/making-vue-3 “Vue 3 è piùveloce, più piccolo, più mantenibile ed e maggiormente integrato allo standard nativo.” Evan You
- 11. Miglioramenti Changes • Il VirtualDOM è stato riscritto per migliorare le performance; • Supporto a Typescript; • Più flessibilità nella creazione dell’app e delle configurazioni che erano globali in Vue2; • Riduzione del pacchetto;
- 12. Perché riscriverlo? Changes • Riduzionedel debito tecnico; • Facilitare i contributor; • Le funzioni di render di Vue3 impiegano meno di 1/10 del CPU time rispetto alla versione 2;
- 13.
- 14. Cosa cambia? Changes Creazione dell’appVue L’applicazione si crea con la factory createApp() La proprietà data Obbligatorio l’uso della prop data come metodo Registrazione Componenti e plugin vengono registrati sotto l’istanza tornata dal metodo createApp() Life cycle hooks Rinominare beforeDestroy() e destroyed() in beforeUnmount() e unmounted() Transizioni Rinominato la prop da v-enter a v-enter-from Registrazione Vuex Registrazione mediante factory createStore() Registrazione Rounter Registrazione mediante factory createRouter()
- 15. New features Teleport componentAppende un’elemento sotto un altro pezzo di DOM Fragment Root template con più elementi fratelli Composition Api Modalità opzionale per sostituire le option props Changes
- 16.
- 17. Cosa serve? Composition Api Comei React hooks, la Composition API permette di comporre la propria logica utilizzando le helper API esportate in un modulo ad hoc. Permette di utilizzare nel componete solo le funzionalità di cui abbiamo bisogno facendo si che il codice sia più ottimizzato. Inoltre, su grandi componenti facilita la lettura rispetto all’approccio Mixin(che resta valido) e di conseguenza il riutilizzo di codice. https://composition-api.vuejs.org/#summary
- 18. Vantaggi Composition Api • Riutilizzodel codice; • Organizzazione del codice; • Approccio funzionale;
- 19. Svantaggi Composition Api • Érichiesta la conoscenza degli operatori; • Ref e reactive possono essere facilmente confusi; • Avere tutto in un unica funzione setup() potrebbe far storcere il naso;
- 20. Component Composition Api data() methodscomputed watch Setup()
- 21.
- 22. Life cycle hooks CompositionApi beforeCreate setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated beforeDestroy onBeforeUnmount destroyed onUnmounted errorCaptured onErrorCaptured
- 23.
- 24. Supporto “nativo” Typescript • Perutilizzare i types per la creazione di componenti si consiglia di usare defineComponent; • vue-class-component (beta) • vue-property-decorator (in attesa di vue-class-component) Classi/Decorators
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.