Vue.extend、new Vue、Vue.component、export default四种创建组件的区别

发表于
字数统计 286字 | 阅读时长 1分钟

刚入职新公司，算是暂时从React转到Vue，所以对Vue的理解和使用也算是新手，每次碰到各种问题，就只能带着问题去解决。 问题的由来是因为看到项目中创建组件的方式是直接export default直接导出一个对象，而之前自己写demo的时候都是Vue.extend或者是new Vue, 也不知道为什么这么用，查了下还有Vue.component加上上述的三个，总共四种方式创建组件， 索性就去看下四种有什么区别。

其实问题算是半个伪命题，因为看到后面你就会知道为什么我会这么说。

先直接看看四种写法吧:

1： Vue.extend

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<p>{{ this is msg }}</p>
</template>
<script>
	import Vue from 'vue'
	export default Vue.extend({
		data() {
			return {
				msg : 'Vue.extend'
			}
		}
	})
</script>

Vue.extend

2：new Vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<p>{{ this is msg }}</p>
</template>
<script>
	import Vue from 'vue'
	export default new Vue({
		data() {
			return {
				msg : 'new Vue'
			}
		}
	})
</script>

3：Vue.component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<p>{{ this is msg }}</p>
</template>
<script>
	import Vue from 'vue'
	export default Vue.component('component-name', {
		data() {
			return {
				msg : 'Vue.component'
			}
		}
	})
</script>

4：export default

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
	<p>{{ this is msg }}</p>
</template>
<script>
	export default {
		data() {
			return {
				msg : 'export default'
			}
		}
	}
</script>