web-dev-qa-db-fra.com

Vue 'export default' vs 'nouvelle Vue'

Je viens d'installer Vue et j'ai suivi des tutoriels pour créer un projet à l'aide du modèle de Webpack Vue-Cli. Quand il crée le composant, je remarque qu'il lie nos données à l'intérieur de ce qui suit:

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

Alors que dans d'autres tutoriels, je vois des données reliées par:

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

Quelle est la différence et pourquoi semble-t-il que la syntaxe entre les deux est différente? Je ne parviens pas à obtenir le code de la «nouvelle vue» à partir de la balise que j'utilise à partir de l'App.vue générée par la vue-cli.

vue.jsvue-componentvue-cli
36
rockzombie2

Quand vous déclarez:

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

Il s’agit généralement de votre instance Vue racine dont le reste de l’application est issu. Cela bloque l'élément racine déclaré dans un document HTML, par exemple:

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

L'autre syntaxe est la déclaration d'un composant qui peut être enregistré et réutilisé ultérieurement. Par exemple, si vous créez un composant de fichier unique tel que:

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

Vous pouvez ensuite importer ceci et l'utiliser comme:

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

Assurez-vous également de déclarer vos propriétés data en tant que fonctions, sinon elles ne seront pas réactives.

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

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

Voici un excellent article qui explique davantage les composants https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

1
atrichkov

Le premier cas (export default {...}) est la syntaxe ES2015 permettant de rendre une définition d'objet disponible pour utilisation.

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

Le premier sera utilisé dans JS pour amorcer Vue, tandis que l’un ou l’autre peut être utilisé pour créer des composants et des modèles.

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

1
Shellum