Vue 'export default' vs 'new Vue'

Я только что установил Vue и следил за некоторыми учебниками для создания проекта с использованием шаблона web-пакета vue-cli. Когда он создает компонент, я замечаю, что он связывает наши данные внутри следующего:

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

Если в других учебниках я вижу, что данные привязаны:

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

В чем разница, и почему кажется, что синтаксис между ними отличается? У меня возникла проблема с получением кода "нового Vue" изнутри тега, который я использую из App.vue, сгенерированного vue-cli.

Ответ 1

Когда вы заявляете:

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

Это, как правило, ваш корневой экземпляр Vue, от которого начинается остальная часть приложения. Это зависает с корневым элементом, объявленным в html-документе, например:

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

Другой синтаксис объявляет компонент, который может быть зарегистрирован и повторно использован позже. Например, если вы создаете один компонент файла, например:

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

Вы можете впоследствии импортировать это и использовать его так:

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

Кроме того, обязательно объявляйте свои свойства data как функции, иначе они не будут реагировать.

Ответ 2

export default используется для создания локальной регистрации для компонента Vue.

Вот отличная статья, которая объясняет больше о компонентах https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

Ответ 3

Первый случай (export default {...}) - это синтаксис ES2015 для обеспечения доступности некоторого определения объекта.

Второй случай (new Vue (...)) - это стандартный синтаксис для создания экземпляра объекта, который был определен.

Первый будет использоваться в JS для начальной загрузки Vue, а любой из них может использоваться для создания компонентов и шаблонов.

Смотрите https://vuejs.org/v2/guide/components-registration.html для более подробной информации.

Ответ 4

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

Ответ 5

Всякий раз, когда вы используете

export someobject

и кто-то есть

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

Выше вы можете импортировать куда угодно, используя import или module.js, и там вы можете использовать некоторый объект. Это не ограничение, что someobject будет объектом, только он также может быть функцией, классом или объектом.

Когда вы говорите

new Object()

как ты сказал

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

Здесь вы инициируете объект класса Vue.

Я надеюсь, что мой ответ объясняет ваш запрос в целом и более подробно.