Vue-extend和VueComponent有什么区别和联系，如何正确使用？

本文共计2839个文字，预计阅读时间需要12分钟。

在一个非单一文件组件中（一个文件中包含n个组件，最常见的如单个文件中存在多个组件），若我们需要在这个文件中创建n个组件并在页面上展示，此时我们首先需要定义组件。

在一个非单文件组件中(一个文件中包含n个组件，最常见的就是单个html文件中存在多个组件)，如果我们需要在这个文件中创建n个组件，然后再页面上展示，这时候我们就需要先定义组件，然后注册组件，最后使用组件。在定义组件这一步，我们就需要使用到 extend 这个方法。当然，也可以在一个html文件中使用多个 new Vue () 来注册组件，但是这么做有问题，下面再说。

Vue.extend(option)

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

组件选项：templete模板(el属性只能在 new Vue() 时使用)、data数据、methods方法、computed计算属性等等正常组件拥有的。

我的理解：首先 extend 是 Vue 自带的一个全局方法，该方法接收一个对象作为参数，在实例化的时候，通过传递的参数将一个空的 Vue实例 进行扩展，并以此来创造出一个 Vue 子类，也就是我们说的 Vue 组件。

使用方法：

1、非单文件组件内部所有组件全部使用 Vue.extend() 方式注册(未指定根组件，无法渲染)

2、非单文件组件中使用 new Vue() 注册根组件，其余子组件则使用 Vue.extend() 方式注册。