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

刚入门 vue 的,可能会有这样的困惑:什么时候用new vue({}),什么时候用export default {} 呢?
比如,我们在用 cli 创建项目时

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

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

常见疑问:

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

解释:

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

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

export default命令并不是在每个文件中都是必须的。它的作用只是用于导出模块,在别的模块需要调用这个模块的时候,可以通过import命令引入使用的,里面的data()方法要return。
————————————————
版权声明:本文为CSDN博主「编程者说」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/shipfei_csdn/article/details/105737128

posted @ 2022-06-14 15:22  好奇成传奇  阅读(1819)  评论(0编辑  收藏  举报