Vue 'padrão de exportação' vs 'novo Vue'

136

Acabei de instalar o Vue e tenho seguido alguns tutoriais para criar um projeto usando o modelo de webpack vue-cli. Quando ele cria o componente, percebo que ele vincula nossos dados dentro do seguinte:

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

Considerando que, em outros tutoriais, vejo dados vinculados a partir de:

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

Qual é a diferença e por que parece que a sintaxe entre os dois é diferente? Estou tendo problemas para que o código 'new Vue' funcione de dentro da tag que estou usando no App.vue gerado pelo vue-cli.

vue.js vue-component vue-cli

— rockzombie2
fonte

graças a Deus por vscode!

— petey

161

Quando você declara:

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

Essa é normalmente a sua instância raiz do Vue da qual o restante do aplicativo desce. Isso interrompe o elemento raiz declarado em um documento html, por exemplo:

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

A outra sintaxe está declarando um componente que pode ser registrado e reutilizado posteriormente. Por exemplo, se você criar um único componente de arquivo como:

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

Mais tarde, você pode importar e usá-lo como:

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

Além disso, certifique-se de declarar suas datapropriedades como funções, caso contrário, elas não serão reativas.

4

Tudo bem, sempre que estiver trabalhando em um arquivo de componente "MyApp.vue", você usará a sintaxe "padrão de exportação {}"; caso contrário, se estiver usando o Vue apenas em um arquivo HTML simples, estar usando "novo Vue ({})", correto?

— rockzombie2

4

De um modo geral, sim. Se você cria a instância raiz no próprio documento HTML ou um arquivo externo - isto é main.js- não importa realmente, saiba que é o ponto de partida do aplicativo, semelhante aos arquivos int main()C. Component.vuesempre usará a export default { ... }sintaxe. Os documentos fazem um bom trabalho explicando as diferenças entre os componentes, global , local e arquivo único

Estou seguindo o primeiro novo Vue ({el: '#app', data () {return {msg: 'A'}})}. Quando tento usar o {{msg}} a propriedade ou o método "msg" não é definido na instância, mas referenciado Por quê? @ user320487

— user123456

8

export default é usado para criar registro local para o componente Vue.

Aqui está um ótimo artigo que explica mais sobre os componentes https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
fonte

5

O primeiro case ( export default {...}) é a sintaxe do ES2015 para disponibilizar alguma definição de objeto para uso.

O segundo caso (new Vue (...) ) é uma sintaxe padrão para instanciar um objeto que foi definido.

O primeiro será usado no JS para inicializar o Vue, enquanto qualquer um pode ser usado para criar componentes e modelos.

Consulte https://vuejs.org/v2/guide/components-registration.html para obter mais detalhes.

— Shellum
fonte

3

Sempre que você usa

export someobject

e someobject é

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

acima, você pode importar para qualquer lugar usando importoumodule.js e aí você pode usar algum objeto. Não é uma restrição que algum objeto seja um objeto, mas também uma função, uma classe ou um objeto.

Quando voce diz

new Object()

como você disse

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

Aqui você está iniciando um objeto da classe Vue.

Espero que minha resposta explique sua consulta em geral e de forma mais explícita.

— DHRUV GUPTA
fonte

-7

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

— A.Batgem
fonte

20

Bem-vindo ao Stack Overflow! Sua resposta pode ser muito mais útil para outros usuários se você puder adicionar um pouco de explicação ao código.

— Outro # nó 22/08