vue单文件组件开发，引入组件时引入的到底是什么？

vue单文件组件开发,引入组件时，引入的是对应单文件组件的VueComponent()构造函数

什么是vue单文件组件？

写法一：

<template></template>

<script>

export default Vue.extend({

　　data(){},

　　methods:{},

　　computed:{},

　　created(){}

})

</script>

<style></style>

写法二：

<template></template>

<script>

export default {

　　data(){},

　　methods:{},

　　computed:{},

　　created(){}

}

</script>

<style></style>

为什么导出是一个对象，而引入的却变成了一个构造函数呢？

VueComponent()构造函数从何而来？

原因可能为：webpack打包工具检测到引入文件为.vue文件，自动解析文件，将template标签的内容变成了Vue.extend(options)中options的template配置项；script标签中的data,methods,computed...，变成了options中的data,methods,computed...配置项；至于css,不太懂...，最后导出的时候自动调用了Vue.extend()方法从而生成了该单文件组件的VueComponent()构造函数

VueComponent()构造函数是调用Vue.extend(options)方法，返回的一个构造函数，这里的options指的就是组件的各个配置项，包括（data,methods,computed,template...）等等之类，,由于options存在不一样，所以返回的构造函数也是不一样的。

VueComponent()构造函数也叫组件构造函数，而 new Vue({})中的Vue也是一个构造函数，是vm的构造函数。