Vue 'export par défaut' vs 'nouvelle vue'

136

Je viens d'installer Vue et j'ai suivi quelques tutoriels pour créer un projet en utilisant le template webpack vue-cli. Lorsqu'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 liées à partir de:

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

Quelle est la différence et pourquoi semble-t-il que la syntaxe entre les deux est différente? J'ai du mal à faire fonctionner le code `` nouveau Vue '' à partir de la balise que j'utilise depuis l'App.vue généré par vue-cli.

vue.js vue-component vue-cli

— rockzombie2
source

Dieu merci pour vscode!

— Petey

162

Lorsque vous déclarez:

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

Il s'agit généralement de votre instance racine de Vue dont le reste de l'application descend. Cela se bloque sur l'élément racine déclaré dans un document html, par exemple:

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

L'autre syntaxe déclare un composant qui peut être enregistré et réutilisé plus tard. Par exemple, si vous créez un composant de fichier unique comme:

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

Vous pouvez ultérieurement l'importer 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 datapropriétés en tant que fonctions, sinon elles ne seront pas réactives.

4

D'accord, donc chaque fois que vous travaillez dans un fichier de composant "MyApp.vue", vous utiliserez la syntaxe "export default {}", mais sinon si vous utilisez juste Vue dans un fichier HTML simple, vous utiliser "new Vue ({})", correct?

— rockzombie2

4

En général, oui. Que vous créiez l'instance racine dans le document HTML lui-même ou dans un fichier externe - c'est-à-dire main.js- n'a pas vraiment d'importance, sachez simplement que c'est le point de départ de l'application, comme int main()dans les Component.vuefichiers C. utiliseront toujours la export default { ... }syntaxe. Les documents font un bon travail en expliquant les différences entre les composants, global , local et fichier unique

Je suis le premier nouveau Vue ({el: '#app', data () {return {msg: 'A'}})} Alors quand j'essaye d'utiliser {{msg}} La propriété ou la méthode "msg" n'est pas défini sur l'instance mais référencé Pourquoi? @ user320487

— user123456

8

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

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

— atrichkov
source

5

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

Le deuxième cas ( new Vue (...)) est la syntaxe standard pour instancier un objet qui a été 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.

— Shellum
source

3

Chaque fois que vous utilisez

export someobject

et un objet est

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

ce qui précède, vous pouvez importer n'importe où en utilisant importou module.jset là, vous pouvez utiliser un objet. Ce n'est pas une restriction selon laquelle un objet sera un objet, mais il peut également être une fonction, une classe ou un objet.

Quand tu dis

new Object()

comme tu as dis

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

Ici, vous lancez un objet de la classe Vue.

J'espère que ma réponse explique votre question en général et plus explicitement.

— DHRUV GUPTA
source