Vue 之 new vue({})与export default {} 的区别

左手的ㄟ右手 2023-05-21 08:50 31阅读 0赞

刚入门 vue 的，可能会有这样的困惑：什么时候用new vue(\{\})，什么时候用export default \{\} 呢？

比如，我们在用 cli 创建项目时，

1、在 main.js 入口里面用的时new vue(\{\})

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaXBmZWlfY3Nkbg_size_16_color_FFFFFF_t_70][]

2、在其他组件里面用 export default \{\}

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaXBmZWlfY3Nkbg_size_16_color_FFFFFF_t_70 1][]

###  常见疑问： ###

1.  new vue(\{\}) 只在入口文件 main.js里使用，而其余组件的里的属性和方法的使用，为什么都要放在export default\{\}中，而不是每个组件都用new Vue(\{\})来生成呢？
2.  放在export default\{\}中它是作为一个class被导出的么？
3.  写法也不一样。就data来说，给作为new Vue的参数，它是对象。而在 export default中，它就成了方法。

### 解释： ###

export default是ES6的语法，用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入。

而 new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。

export default命令并不是在每个文件中都是必须的。它的作用只是用于导出模块，在别的模块需要调用这个模块的时候，可以通过import命令引入使用的，里面的data()方法要return。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaXBmZWlfY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20230521/e6330dfb7d3a426485a3f1ad5d563d00.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaXBmZWlfY3Nkbg_size_16_color_FFFFFF_t_70 1]: /images/20230521/661b3dc21eb340cb832b8cea8f592afa.png