Differenze tra istanza vue e componente vue?

Question

Sono nuovo a vue js e ho alcune domande quando lo apprendo.

Ora sono un po 'confuso sulla relazione tra istanza e componente. Per quanto ho appreso, ogni app build di vue dovrebbe avere solo un'istanza e solo un'istanza, può avere tutti i componenti che vuoi, se necessario. Ma recentemente ho visto una demo, e in quella demo ha più di un'istanza.

Quindi la mia domanda è, è che va bene avere più intances in una sola app (il codice demo funziona bene, ma è quello corretto)? Qual è la prassi migliore per utilizzare l'istanza e il componente nell'app Vue?

Answer 1

Va bene avere due istanze nello stesso progetto, tuttavia, probabilmente non si vuole farlo.

Un buon scenario è quello di avere un'istanza principale per controllare l'app, specialmente se si sta creando un'applicazione a singola pagina (SPA). Quindi usa tutti i componenti che vuoi.

I componenti sono un ottimo modo per riutilizzare il codice e mantenerlo organizzato e, con Vue.js, è molto facile comunicare tra i componenti e l'istanza di Vue "principale".

Answer 2

L'istanza di Vue può essere associata e manipolata a un elemento già esistente.

Componente Vue più adatto per creare un nuovo elemento e riutilizzarlo ovunque.

Answer 3

Dipende molto dalla situazione.

Lavoro su un grande progetto Web che non è una SPA. Abbiamo un'istanza Vue per ogni "silo" dell'applicazione. Stiamo lentamente spostando un progetto precedente da un frontend per lo più jQuery, quindi è possibile che mentre evolve Saremo in grado di condensare fino a una singola istanza di Vue, ma non abbiamo problemi con più istanze. La facilità di usare Vue nei progetti esistenti è stato uno dei maggiori fattori decisivi nella scelta rispetto ad un'altra libreria come la reazione.

Ho adottato un approccio diverso con lo sviluppo verde, un'istanza e molti componenti.

Answer 4

Ci sono alcuni elementi in comune e alcune differenze tra l'istanza Vue e il componente Vue.

1. Da Vue docs:

tutti i componenti Vue sono anche casi Vue, e quindi accettare le stesse opzioni oggetto (ad eccezione di un paio di opzioni specifiche di root).

casi La Vue accettare i dati come el, router, i componenti Vue non può. La proprietà data nelle istanze di Vue è un oggetto, ma nei componenti Vue deve essere una funzione.

2. L'obiettivo di progettazione è diverso:

esempio Vue è Vue application launcher, componente Vue è un'estensione dell'istanza Vue.

I componenti Vue possono creare elementi e utilizzarlo in molti luoghi simili.Questa caratteristica Vue della componentizzazione riflette principalmente il punto.