是“=10=”与“=11=”

Question

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

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

而在其他教程中我看到数据绑定自：

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

有什么区别，为什么两者之间的语法看起来不同？我在获取 'new Vue' 代码时遇到问题在我使用的标签内，来自 vue-cli 生成的 App.vue。

Answer 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 属性声明为函数，否则它们将不会响应。

Answer 2

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

这是一篇很好的文章，详细解释了组件 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

Answer 3

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

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

第一个将在 JS 中用于 bootstrap Vue，而两者都可用于构建组件和模板。

有关详细信息，请参阅 https://vuejs.org/v2/guide/components-registration.html。

Answer 4

无论何时使用

export someobject

并且某个对象是

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

以上你可以使用 import 或 module.js 导入任何地方，在那里你可以使用一些对象。这不是限制 someobject 将是一个对象，它也可以是一个函数，class 或一个对象。

当你说

new Object()

就像你说的

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

这里你正在启动一个classVue的对象。

我希望我的回答能更笼统地解释您的查询。

是“=10=”与“=11=”

Vue 'export default' vs 'new Vue'

vue.js

vue-component

vue-cli