Vue.component VS Vue.extend VS Vue.mixin VS new Vue

[yan647]

Vue.component

Vue官方对component的介绍 Vue.component 是用来全局注册组件或获取组件的方法。其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件，可以简单理解为当在模板中遇到该组件名称作为标签的自定义元素时，会自动调用类似于 new myVue 这样的构造函数来生成组件实例，并挂载到自定义元素上，当然实际情况要比这复杂得多，还需要处理 props 数据传递、slot 内容分发、自定义事件、组件生命周期……事宜。

Vue.extend

Vue官方对extend的介绍 是个全局API，直接在Vue上挂载方法。作用是创建一个“子类”，返回一个扩展实例构造器，也就是一个预设了部分选项的 Vue 实例构造器

Vue.mixin

Vue官方对mixin的介绍 全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。

new Vue

区别	Vue.component	Vue.extend	Vue.mixin	new Vue
返回值	返回一个组件	返回一个实例构造器，只对这个子类的实例对象有影响，不影响Vue本身，即对其他Vue组件没有影响	给组件添加一些通用的对象引用和方法	返回一个Vue实例
用法	用来全局注册组件或获取组件。Vue.component('some-component', baseOptions); Vue.component('some-component', Vue.extend(baseOptions)); Vue.component('some-component',{props:[],data:(){},template:'',methods:{}})	Vue.extend({template:'',data:(){},});	Vue.mixin({data:{},methods:{}});	new Vue({data:{},methods:{}})

参考

• 《深入浅出Vue.js》
• https://segmentfault.com/q/1010000007312426
• https://juejin.cn/post/6978675600097542181