Vue“导出默认”与“新 Vue”答案

【问题标题】：Vue“导出默认”与“新 Vue”
【发布时间】：2018-07-21 12:35:09
【问题描述】：

我刚刚安装了 Vue，并且一直在遵循一些教程来使用 vue-cli webpack 模板创建项目。当它创建组件时，我注意到它将我们的数据绑定在以下内容中：

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

而在其他教程中，我看到数据来自：

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

有什么区别，为什么两者之间的语法看起来不同？我无法让“新 Vue”代码从我所在的标签内部工作从 vue-cli 生成的 App.vue 中使用。

【问题讨论】：

标签： vue.js vue-component 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 属性声明为函数，否则它们不会是反应式的。

【讨论】：

好的，所以每当您在“MyApp.vue”组件文件中工作时，您将使用“export default {}”语法，否则如果您只是在一个纯 HTML 文件，您将使用“new Vue({})”，对吗？
一般来说，是的。无论您是在 HTML 文档本身还是在外部文件中创建根实例 - 即 main.js - 并不重要，只要知道它是应用程序的起点，类似于 C 中的 int main()。Component.vue文件将始终使用export default { ... } 语法。文档很好地解释了组件之间的差异，global、local 和 single file
我正在关注第一个 new Vue({ el: '#app', data () { return {msg: 'A'} } )} 然后当我尝试使用 {{msg}}属性或方法“msg”未在实例上定义但被引用为什么？ @user320487
第一次在这里研究 Vue.js，我很困惑。对于您的组件，您已经声明了 export default 和 data() 并且可能还声明了所有 styling。为什么导入组件后还要重新做所有的事情？

【解决方案2】：

export default 用于为 Vue 组件创建本地注册。

这是一篇很棒的文章，它解释了有关组件的更多信息 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

【讨论】：

【解决方案3】：

第一种情况(export default {...}) 是 ES2015 语法，用于使某些对象定义可供使用。

第二种情况 (new Vue (...)) 是用于实例化已定义对象的标准语法。

第一个将在 JS 中用于引导 Vue，而任何一个都可用于构建组件和模板。

【讨论】：

【解决方案4】：

无论何时使用

export someobject

有些物体是

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

您可以使用import 或module.js 在任何地方导入以上内容，然后您可以使用someobject。这不是限制 someobject 将是一个对象，它也可以是一个函数、一个类或一个对象。

当你说

new Object()

就像你说的

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

这里你正在初始化一个 Vue 类的对象。

我希望我的回答能更全面、更明确地解释您的问题。

【讨论】：