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.

vue.js vue-component vue-cli

— rockzombie2
fonte

meno male per vscode!

— Petey,

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

8

export default viene utilizzato per creare la registrazione locale per il componente Vue.

Ecco un ottimo articolo che spiega di più sui componenti https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
fonte

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.

— Shellum
fonte

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.

— DHRUV GUPTA
fonte