Vue组件编写的两种方式

Question

在编写Vue组件的时候，用到Vue.component注册微全局组件，具体到某个组件的时候我们的写法可以有

(1)export default{}
(2)const ** = Vue.extend({}) export default ** 

这两种方式，这两种方式在编写组件具体有什么区别吗，哪种方式比较值得推荐？

Answer 1

我觉得这里你问的应该是在组件中写不写Vue.extend的区别。

首先要明白Vue.extend是干什么的：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

使用Vue.extend({}) 创建的是一个Vue的子类的构造函数:

var a = Vue.extend({});
new a() instanceof Vue //true

但其实在使用Vue.component(name, options)的时候, 如果options是对象, 那么vue会隐式的去调用Vue.extend(options)。
所以你在创建组件的时候没必要去手动写Vue.extend, 直接 export default{} 即可。

Answer 2

用 1 吧，1 是 2 的语法糖，实际效果是一模一样的，用 1 简便省事。

如果要用 2，也没必要分两句来写，直接 export default Vue.extend({}) 即可。

另外，在 .vue 单文件组件中，能否用 2 这种写法还需要试验一下。