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

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.

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

8

export default służy do tworzenia lokalnej rejestracji komponentu Vue.

Oto świetny artykuł, który wyjaśnia więcej na temat komponentów https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
źródło

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