Vue 'export default' vs 'new Vue'


136

Ho appena installato Vue e ho seguito alcuni tutorial per creare un progetto usando il modello webpack vue-cli. Quando crea il componente, noto che lega i nostri dati all'interno di quanto segue:

export default {
    name: 'app',
    data: []
}

Mentre in altri tutorial vedo che i dati sono associati da:

new Vue({
    el: '#app',
    data: []
)}

Qual è la differenza e perché sembra che la sintassi tra i due sia diversa? Ho problemi a far funzionare il codice 'new Vue' dall'interno del tag che sto usando da App.vue generato da vue-cli.


meno male per vscode!
Petey,

Risposte:


162

Quando dichiari:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

Questa è in genere l'istanza di root di Vue da cui discende il resto dell'applicazione. Ciò si blocca sull'elemento radice dichiarato in un documento HTML, ad esempio:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

L'altra sintassi sta dichiarando un componente che può essere registrato e riutilizzato in seguito. Ad esempio, se si crea un singolo componente di file come:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

Successivamente puoi importarlo e usarlo come:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

Inoltre, assicurati di dichiarare le tue dataproprietà come funzioni, altrimenti non saranno reattive.


4
Ok, quindi ogni volta che lavori in un file componente "MyApp.vue", utilizzerai la sintassi "export default {}", ma altrimenti se stai usando Vue in un semplice file HTML, stai usando "new Vue ({})", giusto?
rockzombie2,

4
In generale, sì. Sia che tu crei l'istanza di root nel documento HTML stesso o un file esterno - cioè main.js- non importa, sappi solo che è il punto di partenza dell'applicazione, simile a int main()in C. Component.vuefiles userà sempre la export default { ... }sintassi. I documenti fanno un buon lavoro spiegando le differenze tra componenti, globale , locale e singolo file

Sto seguendo il primo nuovo Vue ({el: '#app', data () {return {msg: 'A'}})} Quindi quando provo ad usare {{msg}} la proprietà o il metodo "msg" non è definito sull'istanza ma referenziato Perché? @ user320487
user123456


5

Il primo caso ( export default {...}) è la sintassi ES2015 per rendere disponibili alcune definizioni degli oggetti.

Il secondo caso ( new Vue (...)) è la sintassi standard per creare un'istanza di un oggetto che è stato definito.

Il primo verrà utilizzato in JS per bootstrap Vue, mentre uno dei due può essere utilizzato per creare componenti e modelli.

Vedi https://vuejs.org/v2/guide/components-registration.html per maggiori dettagli.


3

Ogni volta che usi

export someobject

e qualche oggetto lo è

{
 "prop1":"Property1",
 "prop2":"Property2",
}

quanto sopra puoi importare ovunque usando importo module.jse lì puoi usare qualche oggetto. Questa non è una limitazione che qualche oggetto sarà un oggetto, ma può anche essere una funzione, una classe o un oggetto.

Quando dici

new Object()

come hai detto

new Vue({
  el: '#app',
  data: []
)}

Qui stai iniziando un oggetto di classe Vue.

Spero che la mia risposta spieghi la tua domanda in generale e in modo più esplicito.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.