Vue „Domyślny eksport” a „Nowy Vue”

136

Właśnie zainstalowałem Vue i postępowałem zgodnie z kilkoma samouczkami, aby stworzyć projekt przy użyciu szablonu vue-cli webpack. Kiedy tworzy komponent, zauważam, że wiąże nasze dane wewnątrz następujących elementów:

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

Podczas gdy w innych samouczkach widzę, że dane są powiązane z:

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

Jaka jest różnica i dlaczego wydaje się, że składnia między nimi jest inna? Mam problem z uzyskaniem działania „nowego kodu Vue” z wnętrza tagu, którego używam, z App.vue wygenerowanego przez vue-cli.

vue.js vue-component vue-cli rockzombie2
źródło
dzięki Bogu za vscode!
petey

Odpowiedzi:

161

Kiedy deklarujesz:

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

Jest to zazwyczaj Twoja główna instancja Vue, z której wywodzi się reszta aplikacji. Powoduje to zawieszenie się elementu głównego zadeklarowanego w dokumencie HTML, na przykład:

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

Druga składnia to deklaracja komponentu, który można zarejestrować i ponownie wykorzystać później. Na przykład, jeśli utworzysz pojedynczy składnik pliku, taki jak:

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

Możesz później zaimportować to i używać jak:

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

Pamiętaj również, aby zadeklarować swoje datawłaściwości jako funkcje, w przeciwnym razie nie będą one reaktywne.


źródło
4
OK, więc za każdym razem, gdy pracujesz z plikiem komponentu „MyApp.vue”, będziesz używać składni „export default {}”, ale poza tym, jeśli używasz Vue tylko w zwykłym pliku HTML, używać „nowego Vue ({})”, prawda?
rockzombie2
4
Ogólnie rzecz biorąc, tak. Niezależnie od tego, czy utworzysz instancję główną w samym dokumencie HTML, czy w zewnętrznym pliku - tj. main.js- tak naprawdę nie ma znaczenia, po prostu wiedz, że jest to punkt początkowy aplikacji, podobnie jak int main()w przypadku Component.vueplików C. zawsze będzie używać export default { ... }składni. Dokumenty wykonują dobrą robotę, wyjaśniając różnice między komponentami, globalnym , lokalnym i pojedynczym plikiem
Śledzę pierwszy nowy Vue ({el: '#app', data () {return {msg: 'A'}})} Następnie, gdy próbuję użyć {{msg}} Właściwość lub metoda "msg" nie jest zdefiniowane w instancji, ale przywoływane Dlaczego? @ user320487
user123456
5

Pierwszy przypadek ( export default {...}) to składnia ES2015 umożliwiająca udostępnienie do użytku niektórych definicji obiektów.

Drugi przypadek ( new Vue (...)) to standardowa składnia do tworzenia wystąpienia obiektu, który został zdefiniowany.

Pierwsza z nich zostanie wykorzystana w JS do załadowania Vue, a każda z nich może zostać użyta do tworzenia komponentów i szablonów.

Więcej informacji można znaleźć pod adresem https://vuejs.org/v2/guide/components-registration.html .

Shellum
źródło
3

Zawsze, gdy używasz

export someobject

a jakimś przedmiotem

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

powyższe możesz importować w dowolnym miejscu za pomocą importlubmodule.js i tam możesz użyć jakiegoś obiektu. Nie jest to ograniczenie, że jakiś obiekt będzie obiektem, tylko że może to być również funkcja, klasa lub obiekt.

Kiedy powiesz 

new Object()

tak jak powiedziałeś 

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

Tutaj inicjujesz obiekt klasy Vue.

Mam nadzieję, że moja odpowiedź wyjaśnia twoje pytanie ogólnie i bardziej wyraźnie.

DHRUV GUPTA
źródło
-7 
<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>
A. Batgem
źródło
20
Witamy w Stack Overflow! Twoja odpowiedź mogłaby być znacznie bardziej pomocna dla innych użytkowników, gdybyś mógł dodać trochę wyjaśnienia do kodu.
anothernode