'export default' 与 'new Vue' 有何区别？
我刚安装了 Vue，并且已经按照一些教程使用 vue-cli webpack 模板创建了一个项目。创建组件时，我注意到它将我们的数据绑定在以下内容中：
export default {
name: 'app',
data: []
}
而在其他教程中，我看到数据绑定在：
new Vue({
el: '#app',
data: []
)}
区别是什么，为什么两者的语法看起来不同？ 我对 vue-cli 生成的 App.vue 中 ‘new Vue’ 相关代码感到很迷惑。
jasonandmonte 答道：
当您声明：
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 文件中使用 Vue 时，需要使用 “new Vue{}” 对吗？
-
总的来说，是的。无论何处为 HTML 文档或者一个外部的 JS - 如
main.js创建根实例的时候，不用过于迷惑，只需要知道这是应用的起点即可，类似于 C 语言中的int main()。Component.vue文件通常使用export default{...}语法。如下文档详细描述了两种组件之间的不同， 全局，本地，以及 单文件 -
我使用第一种方式
new Vue({ el: '#app', data () { return {msg: 'A'} } )}去定义，然后尝试使用 {{msg}} 属性或 “msg” 方法，但它未在实例上定义却可以引用，为啥？ -
第一眼看到这里的 Vue.js ，我感觉有点迷。就你的组件来说，已经在
export default中声明了data()，样式估摸也一样定义好了。为何组件引入之后还要再执行其他操作？
Shellum 答道：
第一种方式 (export default {...}) 是 ES2015 语法中用于指定可用对象的方法。
第二种方式 (new Vue (...)) 是用于实例化已定义对象的标准语法。
第一种方式将在 JS 中用于启动 Vue，而两者均可用于构建组件和模板。
有关详细信息，请参阅 vuejs.org/v2/guide/components-regi... 。
本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号