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的构造函数。