Vue 'exportación predeterminada' vs 'nuevo Vue'

136

Acabo de instalar Vue y he estado siguiendo algunos tutoriales para crear un proyecto usando la plantilla de paquete web vue-cli. Cuando crea el componente, noto que une nuestros datos dentro de lo siguiente:

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

Mientras que en otros tutoriales veo datos vinculados desde:

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

¿Cuál es la diferencia y por qué parece que la sintaxis entre los dos es diferente? Tengo problemas para que el código 'nuevo Vue' funcione desde el interior de la etiqueta que estoy usando desde el App.vue generado por el vue-cli.

vue.js vue-component vue-cli

— rockzombie2
fuente

¡gracias a Dios por vscode!

— Petey

162

Cuando declaras:

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

Por lo general, esa es la instancia raíz de Vue de la que desciende el resto de la aplicación. Esto cuelga del elemento raíz declarado en un documento html, por ejemplo:

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

La otra sintaxis está declarando un componente que puede registrarse y reutilizarse más tarde. Por ejemplo, si crea un único componente de archivo como:

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

Luego puede importar esto y usarlo como:

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

Además, asegúrese de declarar sus datapropiedades como funciones, de lo contrario no serán reactivas.

44

Bien, cuando trabaje en un archivo de componente "MyApp.vue", usará la sintaxis "exportar predeterminado {}", pero de lo contrario, si solo usa Vue en un archivo HTML simple, estar usando "nuevo Vue ({})", ¿correcto?

— rockzombie2

44

Hablando en general, sí. Ya sea que cree la instancia raíz en el documento HTML o en un archivo externo, es decir main.js, realmente no importa, solo sepa que es el punto de partida de la aplicación, como int main()en los Component.vuearchivos C. siempre se usará la export default { ... }sintaxis. Los documentos hacen un buen trabajo explicando las diferencias entre componentes, global , local y un solo archivo

Estoy siguiendo el primer Vue nuevo ({el: '#app', data () {return {msg: 'A'}})} Entonces, cuando trato de usar {{msg}} Propiedad o método "msg" no es definido en la instancia pero referenciado ¿Por qué? @ user320487

— user123456

8

export default se usa para crear un registro local para el componente Vue.

Aquí hay un gran artículo que explica más sobre los componentes https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
fuente

5

El primer caso ( export default {...}) es la sintaxis de ES2015 para que alguna definición de objeto esté disponible para su uso.

El segundo caso ( new Vue (...)) es la sintaxis estándar para crear instancias de un objeto que se ha definido.

El primero se usará en JS para arrancar Vue, mientras que cualquiera se puede usar para construir componentes y plantillas.

Consulte https://vuejs.org/v2/guide/components-registration.html para obtener más detalles.

— Shellum
fuente

3

Cada vez que usas

export someobject

y algún objeto es

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

lo anterior puede importar en cualquier lugar usando importo module.jsy allí puede usar algún objeto. Esto no es una restricción de que algún objeto será un objeto, sino que también puede ser una función, una clase o un objeto.

Cuando tu dices

new Object()

Como dijiste

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

Aquí estás iniciando un objeto de clase Vue.

Espero que mi respuesta explique su consulta en general y de manera más explícita.

— DHRUV GUPTA
fuente