Vue 'експорт за замовчуванням' проти 'новий Vue'

136

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

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 {}
    }
)}

Це, як правило, ваш екземпляр root 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

Взагалі кажучи, так. Незалежно від того, чи створюєте ви екземпляр root у самому документі 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

— атричків
джерело

5

Перший випадок ( export default {...}) - це синтаксис ES2015 для надання деякого визначення об’єкта для використання.

Другий випадок ( new Vue (...)) - це стандартний синтаксис для екземпляру визначеного об'єкта.

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

Докладнішу інформацію див. У https://vuejs.org/v2/guide/components-registration.html .

— Шеллум
джерело

3

Щоразу, коли ви користуєтесь

export someobject

а якийсь об’єкт є

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

вище ви можете імпортувати будь-де, використовуючи importабо module.jsтам, і ви можете використовувати якийсь об’єкт. Це не обмеження, що деякийоб'єкт буде об'єктом, він також може бути функцією, класом або об'єктом.

Коли ти кажеш

new Object()

як ти сказав

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

Тут ви ініціюєте об’єкт класу Vue.

Я сподіваюся, що моя відповідь пояснює ваш запит загалом і більш чітко.

— DHRUV GUPTA
джерело