Vue“导出默认”与“新 Vue”
我刚刚安装了 Vue，并且一直在遵循一些教程来使用 vue-cli webpack 模板创建项目。当它创建组件时，我注意到它将我们的数据绑定在以下内容中：
export default {
name: 'app',
data: []
}
而在其他教程中，我看到数据来自：
new Vue({
el: '#app',
data: []
)}
有什么区别，为什么两者之间的语法看起来不同？我无法从 vue-cli 生成的 App.vue 使用的标签内部获取“新 Vue”代码。
当您声明：
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 属性声明为函数，否则它们不会是反应式的。
export default 用于为 Vue 组件创建本地注册。
这是一篇很棒的文章，详细介绍了组件 https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e
第一种情况 (export default {...}) 是 ES2015 语法，用于使某些对象定义可供使用。
第二种情况 (new Vue (...)) 是用于实例化已定义对象的标准语法。
第一个将在 JS 中用于引导 Vue，而任何一个都可用于构建组件和模板。
有关详细信息，请参阅 https://v2.vuejs.org/v2/guide/components-registration.html。
每当你使用
export someobject
有些对象是
{
"prop1":"Property1",
"prop2":"Property2",
}
您可以使用 import 或 module.js 在任何地方导入以上内容，并且可以使用 someobject。这不是限制 someobject 将是一个对象，只是它也可以是一个函数、一个类或一个对象。
当你说
new Object()
像你说的
new Vue({
el: '#app',
data: []
)}
在这里，您正在启动 Vue 类的对象。
我希望我的回答能够更全面、更明确地解释您的查询。
main.js）中创建根实例，都无关紧要，只要知道它是应用程序的起点，类似于 C 中的int main()。Component.vue文件将始终使用export default { ... }语法。文档很好地解释了组件 global、local 和 single file 之间的区别data()声明了export default，并且可能还声明了所有styling。为什么导入组件后必须重新做所有事情？