Vue 'экспорт по умолчанию' против 'новый Vue'

137

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

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

В то время как в других руководствах я вижу привязку данных из:

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

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

vue.js vue-component vue-cli

— rockzombie2
источник

слава богу за vscode!

— Пити,

162

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

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свойства как функции, иначе они не будут реагировать.

4

Хорошо, поэтому всякий раз, когда вы работаете с файлом компонента «MyApp.vue», вы будете использовать синтаксис «экспорт по умолчанию {}», но в противном случае, если вы просто используете Vue в простом файле HTML, вы использовать "новый Vue ({})", верно?

— rockzombie2

4

В общем да. Независимо от того, создаете ли вы корневой экземпляр в самом HTML-документе или во внешнем файле - то есть main.js- на самом деле не имеет значения, просто знайте, что это начальная точка приложения, подобно тому, как файлы int main()C. Component.vueвсегда будут использовать export default { ... }синтаксис. Документация хорошо объясняет различия между компонентами, глобальными , локальными и одиночными

Я слежу за первым новым Vue ({el: '#app', data () {return {msg: 'A'}})} Затем, когда я пытаюсь использовать {{msg}}, свойство или метод «msg» не определено в экземпляре, но указано Почему? @ user320487

— user123456

8

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

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

— atrichkov
источник

5

Первый case ( export default {...}) - это синтаксис ES2015, позволяющий сделать определение объекта доступным для использования.

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

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

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

— Shellum
источник

3

Когда бы вы ни использовали

export someobject

и какой-то объект

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

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

Когда ты говоришь

new Object()

как ты говорил

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

Здесь вы запускаете объект класса Vue.

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

— DHRUV GUPTA
источник