{"id":46647,"date":"2021-07-31T08:51:02","date_gmt":"2021-07-31T06:51:02","guid":{"rendered":"https:\/\/kinsta.com\/?p=98454"},"modified":"2023-02-01T13:41:54","modified_gmt":"2023-02-01T12:41:54","slug":"vue-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/vue-js\/","title":{"rendered":"10 Cose da Sapere sul Frontend Framework Vue.js"},"content":{"rendered":"

Con il continuo aumento dei framework JavaScript frontend<\/a>, tra cui il nuovo Vue.js 3, \u00e8 diventato fondamentale stare al passo e individuare tutte le nuove funzionalit\u00e0.<\/p>\n

In questo articolo analizzeremo Vue.js 3 e le sue ultime novit\u00e0<\/a>. Queste novit\u00e0 rendono Vue.js ancora pi\u00f9 solido, facendone un ottimo framework da tenere in considerazione per i nuovi progetti. Scoprirete in dettaglio 10 cose da sapere su Vue.js e come pu\u00f2 aiutarvi a realizzare applicazioni frontend scalabili e performanti.<\/p>\n

Pronti? Cominciamo!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Cos’\u00c8 Vue.js?<\/h2>\n

Secondo Evan You, il creatore di Vue.js:<\/p>\n

“Vue.js \u00e8 una soluzione pi\u00f9 flessibile e meno discutibile. \u00c8 solo un layer d’interfaccia, cos\u00ec pu\u00f2 essere utilizzato come una feature leggera nelle pagine invece di una SPA completa.”<\/em><\/p><\/blockquote>\n

.
\nEvan voleva creare un framework frontend potente come Angular<\/a>, ma anche pi\u00f9 “leggero” e flessibile, senza tutti i plugin inutili e i concetti di Angular.<\/p>\n

Il risultato \u00e8 stato Vue.js, che \u00e8 uno dei framework frontend pi\u00f9 popolari in uso oggi.<\/p>\n

\"State
Vue.js \u00e8 il secondo framework frontend pi\u00f9 popolare. (Fonte: State of JS 2020<\/a>)<\/figcaption><\/figure>\n\n

Perch\u00e9 gli Sviluppatori Scelgono Vue.js<\/h2>\n

Diverse ragioni spingono uno sviluppatore<\/a> verso una particolare tecnologia. Vediamo perch\u00e9 pensiamo sia utile imparare Vue.js.<\/p>\n

Per iniziare, Vue.js \u00e8 uno dei framework pi\u00f9 semplici per la maggior parte degli sviluppatori perch\u00e9 utilizza JavaScript. Pertanto, chiunque abbia una conoscenza di base di JavaScript sar\u00e0 in grado di sviluppare con Vue.js.<\/p>\n

Lo strumento Vue CLI, combinato con altri strumenti di sviluppo<\/a> frontend, semplifica moltissimo la configurazione di Vue.js. \u00c8 impostato di default con diverse funzionalit\u00e0, ma si pu\u00f2 anche creare codice con una logica e una struttura DRY (Don’t Repeat Yourself).<\/p>\n

Anche la reattivit\u00e0 \u00e8 di default in Vue.js. Ci\u00f2 significa che la funzionalit\u00e0 in tempo reale popolare sul framework Angular \u00e8 una passeggiata con Vue.js. Ad esempio, nella vostra applicazione Vue.js potete facilmente applicare una semplice direttiva come v-if<\/code>.<\/p>\n

Ora analizziamo i principali pro e contro di Vue.js.<\/p>\n

Pro e Contro di Vue.js<\/h2>\n

Oggi Vue.js \u00e8 il secondo framework pi\u00f9 popolare . Vediamo cosa lo attira gli sviluppatori web e cosa li allontana.<\/p>\n

Pro di Vue.js<\/h3>\n

Inizieremo dagli aspetti positivi di Vue.js.<\/p>\n

Dimensioni Ridotte<\/h4>\n

Vue.js ha una dimensione di download molto ridotta, circa 18 KB, che \u00e8 eccellente rispetto ad altri framework di grandi dimensioni. Grazie alle ridotte dimensioni, Vue.js avr\u00e0 un effetto positivo sulla SEO e sulla UX della vostra applicazione frontend<\/a>.<\/p>\n

Componente di un Singolo File e Leggibilit\u00e0<\/h4>\n

Vue.js utilizza un’architettura basata su componenti, separando cos\u00ec grandi blocchi di codice in componenti pi\u00f9 piccoli. Inoltre, in Vue.js tutto \u00e8 un componente e ogni componente \u00e8 scritto con HTML, CSS e JavaScript. Questo favorisce la leggibilit\u00e0 e la semplicit\u00e0.<\/p>\n

Solido Set di Strumenti<\/h4>\n

Vue.js supporta nativamente un gran numero di strumenti di sviluppo frontend che richiedono una ridotta o nulla configurazione da parte vostra. Ad esempio, Vue.js supporta strumenti come Babel e Webpack<\/a>. Inoltre, fornisce test unitari, librerie di test end-to-end, sistemi di routing semplici e flessibili, gestori di stato, rendering lato server (SSR) e altro ancora.<\/p>\n

Semplicit\u00e0<\/h4>\n

Se avete gi\u00e0 utilizzato Vue.js, sarete d’accordo che \u00e8 molto facile da usare. Ha un approccio moderno allo sviluppo web, permettendo anche ai principianti di cominciare a utilizzarlo senza grandi difficolt\u00e0.<\/p>\n

Contro di Vue.js<\/h3>\n

Ora che abbiamo analizzato i pro, scopriamo i contro di Vue.js.<\/p>\n

Complessit\u00e0 delle Reattivit\u00e0<\/h4>\n

L’implementazione del binding bidirezionale permette di gestire comodamente i componenti di Vue.js. Il binding bidirezionale si riferisce alla condivisione dei dati tra una classe di componente e il suo template, \u00e8 sviluppato in modo che, se i dati cambiano in una posizione, vengono aggiornate automaticamente anche le altre.<\/p>\n

Ma c’\u00e8 un problema che riguarda il modo in cui funziona la reattivit\u00e0 mentre il sistema restituisce solo i dati attivati. A volte ci sono errori durante la lettura dei dati, quindi \u00e8 necessario appiattire i dati stessi. Nel sito di Vue.js<\/a> si analizza pi\u00f9 approfonditamente questo problema e il modo in cui viene gestito.<\/p>\n

Barriere di Lingua<\/h4>\n

Inizialmente, Vue.js \u00e8 stato adottato principalmente dai cinesi. Grandi aziende come Xiaomi e Alibaba hanno contribuito a rendere popolare il framework e a creare una domanda nel mercato del lavoro. Tuttavia, con l’adozione significativa da parte di molte aziende cinesi, molti forum, canali di discussione e simili erano principalmente in cinese, rendendo difficile l’adozione di Vue.js per sviluppatori non madrelingua.<\/p>\n

Oggi non \u00e8 pi\u00f9 cos\u00ec in quanto Vue.js si \u00e8 evoluto e ora supporta molte lingue<\/a>, anche se ci sono alcune lingue meno supportate di altre.<\/p>\n

Rischi di Eccessiva Flessibilit\u00e0<\/h4>\n

Come detto sopra, Vue.js \u00e8 molto flessibile e semplice. Pertanto, \u00e8 facile trovare un sacco di spaghetti code ovunque, dato che tutti in un team aziendale possono avere opinioni diverse su come fare le cose.<\/p>\n

Dai pro e contro di Vue.js descritti, potreste gi\u00e0 aver individuato alcune caratteristiche che amate e altre che invece non vi piacciono.<\/p>\n

10 Cose da Sapere su Vue.js<\/h2>\n

Qui sotto ci sono le dieci cose da sapere su Vue.js e perch\u00e9 \u00e8 essenziale conoscerle.<\/p>\n

Propriet\u00e0 Calcolate<\/h3>\n

Una propriet\u00e0 calcolata \u00e8 una delle caratteristiche pi\u00f9 utilizzate di Vue.js. Una propriet\u00e0 calcolata permette di creare propriet\u00e0 che possono essere modificate, manipolate per visualizzare dati in modo efficiente e leggibile.<\/p>\n

Questo torna utile quando volete ripetere molti piccoli metodi per cose come la formattazione, la modifica dei valori, o un grosso processo che dovete attivare in certe situazioni.<\/p>\n

Le propriet\u00e0 calcolate aiutano ad evitare l’eccesso di logica nel vostro template. Una logica eccessiva pu\u00f2 far gonfiare rapidamente il vostro codice e renderlo difficile da mantenere.<\/p>\n

Supponiamo che vogliate formattare una stringa in lettere maiuscole:<\/p>\n

<template>\n  <div>\n    <p> I love {{ value.toUpperCase() }} <\/p>\n  <\/div>\n<\/template>\n<\/code><\/pre>\n
Cosa succede se avete bisogno di cambiare la variabile value<\/code> in 50 posti diversi? Il codice si gonfia, vero? Bene, le propriet\u00e0 calcolate<\/a> sono qui per questo:<\/p>\n
<template>\n  <div>\n    <p> I love {{ value }} <\/p>\n  <\/div>\n<\/template>\n<script>\n  export default {\n    computed:{\n      value(){\n        return this.value.toUpperCase()\n      }\n    }\n  }\n<\/script><\/code><\/pre>\n
Potete facilmente cambiare toUpperCase()<\/code> in toLowerCase()<\/code>, e la modifica si rifletter\u00e0 da un unico punto.<\/p>\n
Gestione degli Eventi<\/h3>\n
Vue.js semplifica la comunicazione tra figlio e genitore grazie a $emit<\/code> e v-on<\/code>. La gestione della comunicazione tra gerarchie di componenti diventa facile e diretta.<\/p>\n
La funzione $emit<\/code> accetta due parametri: una stringa per il nome e un valore opzionale da emettere.<\/p>\n
La funzione v-on:event-name<\/code> \u00e8 utilizzata dal componente figlio per ricevere l’evento emesso dal suo componente genitore:<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add <\/button>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: \"AddEvent\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Una volta attivato il pulsante Add<\/code>, il metodo onClick<\/code> attiva l’evento $emit<\/code>, che emette l’evento add<\/code> verso un componente figlio in ascolto dell’evento add<\/code>.<\/p>\n
Vediamo come rimanere in attesa di un evento:<\/p>\n
<template>\n  <section>\n  <p v-show=\"showSaveMsg\">This component is listening to the ADD event<\/p>\n  <add-event v-on:add=\"onAdd\"><\/add-event>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  data(){\n    return {\n      showSaveMsg: false\n    }\n  },\n  components:{\n    AddEvent: () => import('.\/AddEvent')\n  },\n  methods: {\n    onAdd() { \n        this.showSaveMsg = true;\n    }\n  }\n}\n<\/script><\/code><\/pre>\n
Il codice qui sopra ascolta l’evento add<\/code> e risponde cambiando il valore di showSaveMsg<\/code> a true<\/code>, mostrando nuovamente il messaggio.<\/p>\n
Lazy Loading \/ Componenti Asincroni<\/h3>\n
Lazy loading<\/a> \u00e8 uno dei migliori hack di performance per Vue.js, in cui i componenti sono aggiunti e resi asincroni o on-demand, il che riduce significativamente la dimensione dei file, il tempo di richiesta-risposta HTTP, e cos\u00ec via.<\/p>\n
Il lazy loading si ottiene con le importazioni dinamiche di Webpack, che supporta anche la divisione del codice.<\/p>\n
Vue.js permette il lazy loading dei componenti e pu\u00f2 essere ottenuto globalmente con i seguenti script:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));\n<\/code><\/pre>\n
Potete ottenerlo localmente con un componente, come mostrato qui sotto:<\/p>\n
<template>\n  <div>\n    <component><\/component>\n  <\/div>\n<\/template>\n<script>\nexport default {\n  components: {\n    'Component': () => import('.\/Component')\n  }\n}\n<\/script><\/code><\/pre>\n
Componenti Globali<\/h3>\n
Con i componenti globali di Vue.js possiamo raggiungere una significativa riusabilit\u00e0, potendo registrare un componente una volta e poi utilizzarlo ovunque all’interno della propria istanza di Vue.js.<\/p>\n
I componenti globali sono una funzionalit\u00e0 importante e possono farvi risparmiare un sacco di tempo, evitando di dover registrare i componenti individualmente ogni volta, ma se ne pu\u00f2 facilmente abusare se si registrano tutti i componenti globalmente. Registrare tutti i componenti a livello globale pu\u00f2 far aumentare rapidamente le dimensioni di compilazione, con conseguente scarsa SEO e tempo di caricamento della pagina<\/a> maggiore.<\/p>\n
Registrate sempre globalmente i componenti utilizzati molte volte nel vostro progetto, come mostrato di seguito:<\/p>\n
import Vue from \"vue\";\nVue.component(\"new-component\", () => import(\".\/components\/NewComponent.vue\"));<\/code><\/pre>\n
Componente a Singolo File<\/h3>\n
Una delle funzionalit\u00e0 pi\u00f9 potenti di Vue.js sono i componenti; questi aiutano ad estendere elementi HTML, CSS e JavaScript essenziali in modo da incapsulare codice riutilizzabile.<\/p>\n
I componenti permettono di suddividere grandi progetti in parti pi\u00f9 piccole e riutilizzabili che possiamo estendere all’intero progetto, nel rispetto del principio DRY (Don’t Repeat Yourself) dell’ingegneria software.<\/p>\n
Permettono di avere organizzazione e incapsulamenti per grandi progetti, codice riutilizzabile, e pu\u00f2 essere separato in file .vue<\/code>.<\/p>\n
<template>\n  <section>\n    <button @click=\"onClick\">Add<\/button>\n  <\/section>\n<\/template>\n\n<script>\nexport default {\n  name: \"CustomButtom\",\n  methods: {\n    onClick() { \n      this.$emit('add', this.data);\n    }\n  }\n}\n<\/script>\n\n<style scoped>\n  button{\n    \/** Button Styles *\/\n  }\n<\/style><\/code><\/pre>\n
Gli script qui sopra creano un componente pulsante personalizzato che possiamo riutilizzare nel nostro progetto. Ogni componente ha il suo codice HTML, CSS e JavaScript.<\/p>\n
Testing<\/h3>\n
Vue.js fornisce una delle librerie di testing pi\u00f9 robuste, permettendo di eseguire i test unitari con Jest e Mocha o il testing<\/a> end-to-end in modo semplice e con poca o nessuna configurazione.<\/p>\n
Potrebbe essere utile dare una rapida occhiata al testing con questi strumenti. Analizziamo, quindi, l’installazione, la configurazione e il testing di un progetto demo.<\/p>\n
Se utilizzate lo strumento consigliato Vue CLI<\/a> per impostare il vostro progetto, eseguite questi comandi:<\/p>\n
vue add unit-jest \/\/to run unit test with jest\n\nnpm install --save-dev @vue\/test-utils\n<\/code><\/pre>\n
Poi, dopo la configurazione, includete il codice qui sotto, che dimostra come testare un semplice componente:<\/p>\n
\/\/ Import the `mount()` method from Vue Test Utils\nimport { mount } from '@vue\/test-utils'\n\n\/\/ The component to test\nconst MessageComponent = {\n  template: '<p>{{ message }}<\/p>',\n  props: ['message']\n}\n\ntest('displays a message', () => {\n  \/\/ mount() returns a wrapped Vue component we can interact with\n  const wrapper = mount(MessageComponent, {\n    propsData: {\n      msg: 'Welcome to our testing world'\n    }\n  })\n\n  \/\/ Assert the rendered text of the component\n  expect(wrapper.text()).toContain('Welcome to our testing world')\n})<\/code><\/pre>\n
La Vue Testing Library ha due ottime opzioni per testare i componenti: Mount e Shallow.<\/p>\n
Se volete testare un componente con un isolamento completo, usate il metodo shallow<\/code>. Altrimenti, se avete bisogno di lavorare su un componente con sottocomponenti con cui volete garantire la comunicazione, scegliete l’opzione mount<\/code>.<\/p>\n
Il Potente Vue CLI<\/h3>\n
Vue CLI \u00e8 un eccellente strumento CLI<\/a> e d\u00e0 un grande potere a qualsiasi sviluppatore Vue. Con Vue CLI, \u00e8 possibile testare rapidamente qualsiasi componente in isolamento. La cosa grandiosa di Vue CLI \u00e8 che permette di sviluppare completamente un componente in isolamento, testarlo, e avere ancora accesso al reloading a caldo mentre si itera su quel particolare componente.<\/p>\n
Per dimostrarlo, installiamo Vue CLI a livello globale:<\/p>\n
npm install -g @vue\/cli<\/code><\/pre>\n
Fatto questo, potete testare qualsiasi componente eseguendo il comando qui sotto:<\/p>\n
vue serve .\/components\/views\/Home.vue<\/code><\/pre>\n
Se volete estrarre un particolare componente, ad esempio per condividerlo con i vostri colleghi, potete farlo usando il comando qui sotto:<\/p>\n
vue build --target lib --name goldenRule .\/components\/views\/Home<\/code><\/pre>\n
Vue CLI \u00e8 molto potente e pu\u00f2 far risparmiare un sacco di tempo produttivo se si impara ad utilizzarlo con arte. Se volete saperne di pi\u00f9, date un’occhiata alla documentazione ufficiale<\/a>.<\/p>\n
Gestione delle Propriet\u00e0<\/h3>\n
La gestione delle propriet\u00e0 \u00e8 fondamentale per il componente Vue in quanto pu\u00f2 essere creato in diversi modi. \u00c8 anche possibile convalidare le propriet\u00e0, creare pi\u00f9 propriet\u00e0 e modificarle a seconda delle necessit\u00e0.<\/p>\n
\u00c8 possibile creare una nuova propriet\u00e0 in un componente Vue in diversi modi. Supponendo che abbiate il vostro componente, dovrete creare la prop isAdmin<\/code>.<\/p>\n
Vediamo i diversi metodi:<\/p>\n
<template>\n  <section>\n    <component v-if=\"isAdmin\"><\/component>\n  <\/section>\n<\/template>\n<script>\nexport default {\n  name: 'Component',\n\n \/\/ One\n  props: {\n    isAdmin: {\n      type: Boolean,\n      default: false,\n      required: true\n    }\n  },\n \n \/\/ Two\n  props: ['isAdmin'],\n\n \/\/ Three\n  props: {\n    isAdmin: Boolean\n  }\n\n}\n<\/script><\/code><\/pre>\n
\u00c8 molto importante convalidare le propriet\u00e0. Per fortuna, \u00e8 anche molto semplice:<\/p>\n
\/\/ ...\n\n \/\/ One\n  props: {\n    isAdmin: {\n      default: false,\n      required: true,\n      validator: function(value) {\n        return typeof === 'boolean';\n      }\n    }\n  },\n\n\/\/ ...<\/code><\/pre>\n
Infine, modificare le propriet\u00e0 \u00e8 semplice, basta riallineare i valori:<\/h3>\n
\/\/...\n\nmethods: {\n  isAdmin() {\n    this.isAdmin = true;\n  }\n}\n\n\/\/..\n<\/code><\/pre>\n
Per assegnare un valore alla prop in un componente genitore:<\/p>\n
<template>\n  <section>\n    <component :isAdmin=\"true\"><\/component>\n  <\/section>\n<\/template><\/code><\/pre>\n
Rendering Lato Server (SSR)<\/h3>\n
Con tutte le fantastiche funzionalit\u00e0 e i vantaggi offerti per creare applicazioni frontend, Vue.js \u00e8 sempre una libreria lato client che rende e manipola solo gli elementi del DOM.<\/p>\n
Il rendering lato server permette ai framework lato client come Vue.js di ottenere risultati migliori. I crawler dei motori di ricerca vedranno le pagine del vostro sito web completamente renderizzate durante la scansione.<\/p>\n
Per ottenere l’indicizzazione del sito web<\/a> da Google e Bing pi\u00f9 velocemente, il vostro sito ha bisogno di avere un punteggio time-to-content pi\u00f9 alto. Questo \u00e8 ci\u00f2 che vi permette di ottenere il rendering lato server in Vue.js.<\/p>\n
Il rendering lato server (SSR) \u00e8 una tecnica molto utilizzata per il rendering di una normale applicazione a pagina singola (SPA) lato client sul server e poi inviare una pagina completamente renderizzata al lettore.<\/p>\n
Quando la pagina viene renderizzata lato server, la invia al client come risposta. Cos\u00ec ogni informazione \u00e8 gi\u00e0 stata resa mentre il browser visualizza la pagina del motore di ricerca.<\/p>\n
Per un principiante \u00e8 difficile realizzare SSR in Vue.js<\/a>. Sar\u00e0 pi\u00f9 facile utilizzare Nuxt.js<\/a>, che ha un SSR integrato e una curva di apprendimento molto bassa.<\/p>\n
Distribuzione<\/h3>\n
Vue.js presenter\u00e0 molti avvisi, errori e dimensioni di file notevoli durante lo sviluppo, ma questi problemi svaniscono immediatamente quando si passa al deployment per la produzione. Vue.js configurer\u00e0 automaticamente gli strumenti di build di Webpack, minificazioni<\/a>, estrazione ed eliminazione dei CSS, caching, tracciamento degli errori di runtime e altro ancora.<\/p>\n
I clienti di Kinsta<\/a> possono usare la funzione di minificazione del codice<\/a> integrata a cui si accede direttamente nel cruscotto di MyKinsta<\/a>. Questo permette loro di abilitare facilmente la minificazione automatica di CSS e JavaScript con un semplice clic.<\/p>\n
La distribuzione con Vue.js \u00e8 molto semplice, dato che l’ambiente di produzione viene installato e configurato automaticamente, senza alcun passaggio in pi\u00f9 da parte dello sviluppatore.<\/p>\n
Per distribuire la vostra applicazione Vue.js<\/a>, potete leggere le guide generali.<\/p>\n\n
Riepilogo<\/h2>\n
In questo articolo abbiamo scoperto cos’\u00e8 Vue.js, perch\u00e9 potreste utilizzarlo, quali sono i pro e i contro e le 10 cose da sapere.<\/p>\n
Speriamo che abbiate ora una maggiore conoscenza di Vue.js per realizzare applicazioni frontend scalabili e performanti.<\/p>\n
Continuate a programmare!<\/p>\n
Se avete domande o suggerimenti, vogliamo sentirli. Scriveteli nella sezione dei commenti qui sotto!<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
Con il continuo aumento dei framework JavaScript frontend, tra cui il nuovo Vue.js 3, \u00e8 diventato fondamentale stare al passo e individuare tutte le nuove funzionalit\u00e0. …<\/p>\n","protected":false},"author":193,"featured_media":46650,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25637,25638],"topic":[25918,25847,26160],"class_list":["post-46647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-framework-javascript","tag-vue-js","topic-framework-javascript","topic-tutorial-javascript","topic-vue-js"],"yoast_head":"\n10 Cose da Sapere sul Frontend Framework Vue.js<\/title>\n<meta name=\"description\" content=\"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Cose da Sapere sul Frontend Framework Vue.js\" \/>\n<meta property=\"og:description\" content=\"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-31T06:51:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-01T12:41:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Solomon Eseme\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\" \/>\n<meta name=\"twitter:creator\" content=\"@kaperskyguru\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Solomon Eseme\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\"},\"author\":{\"name\":\"Solomon Eseme\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\"},\"headline\":\"10 Cose da Sapere sul Frontend Framework Vue.js\",\"datePublished\":\"2021-07-31T06:51:02+00:00\",\"dateModified\":\"2023-02-01T12:41:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\"},\"wordCount\":2193,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\",\"keywords\":[\"Framework JavaScript\",\"Vue.js\"],\"articleSection\":[\"Sviluppo Web\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\",\"name\":\"10 Cose da Sapere sul Frontend Framework Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\",\"datePublished\":\"2021-07-31T06:51:02+00:00\",\"dateModified\":\"2023-02-01T12:41:54+00:00\",\"description\":\"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/vue-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/vue-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"10 Cose da Sapere sul Frontend Framework Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2\",\"name\":\"Solomon Eseme\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g\",\"caption\":\"Solomon Eseme\"},\"description\":\"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me\",\"sameAs\":[\"https:\/\/masteringbackend.com\",\"https:\/\/linkedin.com\/in\/solomoneseme\",\"https:\/\/x.com\/kaperskyguru\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/solomoneseme\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Cose da Sapere sul Frontend Framework Vue.js","description":"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/vue-js\/","og_locale":"it_IT","og_type":"article","og_title":"10 Cose da Sapere sul Frontend Framework Vue.js","og_description":"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.","og_url":"https:\/\/kinsta.com\/it\/blog\/vue-js\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2021-07-31T06:51:02+00:00","article_modified_time":"2023-02-01T12:41:54+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","type":"image\/jpeg"}],"author":"Solomon Eseme","twitter_card":"summary_large_image","twitter_description":"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","twitter_creator":"@kaperskyguru","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Solomon Eseme","Tempo di lettura stimato":"12 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/"},"author":{"name":"Solomon Eseme","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2"},"headline":"10 Cose da Sapere sul Frontend Framework Vue.js","datePublished":"2021-07-31T06:51:02+00:00","dateModified":"2023-02-01T12:41:54+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/"},"wordCount":2193,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","keywords":["Framework JavaScript","Vue.js"],"articleSection":["Sviluppo Web"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/vue-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/","url":"https:\/\/kinsta.com\/it\/blog\/vue-js\/","name":"10 Cose da Sapere sul Frontend Framework Vue.js","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","datePublished":"2021-07-31T06:51:02+00:00","dateModified":"2023-02-01T12:41:54+00:00","description":"Scopri i 10 motivi per cui dare un'occhiata a Vue.js come libreria JS frontend per il tuo prossimo progetto di sviluppo web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/vue-js\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2021\/07\/what-to-know-about-vue-js.jpeg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/vue-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Vue.js","item":"https:\/\/kinsta.com\/it\/argomenti\/vue-js\/"},{"@type":"ListItem","position":3,"name":"10 Cose da Sapere sul Frontend Framework Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/51c9c77fa35cf1ef9a46308358441ab2","name":"Solomon Eseme","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1c701993f8ff8c8df2a4c5664834a4e5?s=96&d=mm&r=g","caption":"Solomon Eseme"},"description":"I am a Software Engineer and Content Creator who is geared toward building high-performing and innovative products following best practices and industry standards. I also love writing about it at Masteringbackend.com. Follow me on Twitter, LinkedIn, and About Me","sameAs":["https:\/\/masteringbackend.com","https:\/\/linkedin.com\/in\/solomoneseme","https:\/\/x.com\/kaperskyguru"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/solomoneseme\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/46647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/193"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=46647"}],"version-history":[{"count":11,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/46647\/revisions"}],"predecessor-version":[{"id":54183,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/46647\/revisions\/54183"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/de"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/fr"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/nl"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/translations\/se"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/46647\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/46650"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=46647"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=46647"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=46647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}