Vue 'export default' vs 'nouvelle Vue'

Question

Je viens d'installer Vue et ont été à la suite des tutoriaux pour créer un projet à l'aide de la vue-cli webpack modèle. Lorsqu'il crée le composant, je remarque qu'il se lie nos données à l'intérieur de l'suivantes:

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

Alors que dans d'autres tutoriels, je vois données lié à partir de:

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

Quelle est la différence, et pourquoi ne dirait-on pas que la syntaxe entre les deux est-elle différente? Je vais avoir de la difficulté à l'obtention de la "nouvelle Vue" code à travailler à partir de l'intérieur de la balise, je suis à l'aide de l'App.vue générés par la vue-cli.

Answer 1

export default est utilisé pour créer un enregistrement local pour le composant Vue.

Voici un excellent article qui explique plus en détail les composants https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

Answer 2

Le premier cas (export default {...}) est ES2015 syntaxe pour créer un objet de définition disponibles pour utilisation.

Le deuxième cas (new Vue (...)) est la syntaxe standard pour l'instanciation d'un objet qui a été défini.

La première sera utilisée en JS pour l'amorçage de Vue, tandis que l'autre peut être utilisé pour construire des composants et des modèles.

Voir https://vuejs.org/v2/guide/components-registration.html pour plus de détails.

Answer 3

Chaque fois que vous utilisez

export someobject

et someobject est

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

le ci-dessus, vous pouvez importer n'importe où à l'aide de import ou module.js et de là vous pouvez utiliser someobject. Ce n'est pas une restriction qui someobject sera un objet qu'il peut être une fonction, une classe ou un objet.

Quand vous dites

new Object()

comme vous l'avez dit

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

Ici, vous êtes en train de lancer un objet de la classe Vue.

J'espère que ma réponse explique votre requête en général et de façon plus explicite.

Answer 4

<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>