Vue.extend与Vue.component的区别

一、Vue.extend是啥

1、官方解释：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。例子如下（先Vue.extend再$mount）：

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

2、但是还是不懂怎么办，这样来讲~

• 我们把new Vue({})生成的东西称为「赤果果的实例」，就是options里面啥都没有，就是一个空对象；
• new Vue({/* something */ })叫做「有内容的实例」，options里有内容了；
• Vue.extend({/* something */})会返回一个「有内容的类」，赋值给Constructor，可以这样用new Constructor()，它会返回什么呢？答：返回一个「有内容的实例」，即使它在new的时候没有传options，因为它的构造器Constructor自带内容啊（你给它extend进去了嘛），当然，new Constructor({/* something */})里面也可以添加options~
• 一般Vue.extend()这样用：

var myvue = Vue.extend(这里可以是一个.vue单文件组件，也可以是一个包含组件选项的对象) 
var vm = new myvue({
    //其他选项
})

二、Vue.component()

1、注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称；

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

这样一看，就比较清晰了，extend和component作用基本相同，区别在于我们需不需要使用组件名称，不需要使用组件名称时，用extend会简便些；需要使用新的标签来定义组件时，那么就用component去创建组件;

三、Vue的插件功能，插件通常用来为 Vue 添加全局功能

1、开发插件的方法（有四个方法），首先应该暴露一个install方法，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象：

//它是个JS文件
    export default {
        install(Vue,options){
            // 1. 添加全局方法或 property
            Vue.myGlobalMethod = function () {
              // 逻辑...
             }

            // 2. 添加全局资源
            Vue.directive('my-directive', {
                  bind (el, binding, vnode, oldVnode) {
                  // 逻辑...
                   }
                 ......
            })

          // 3. 注入组件选项
           Vue.mixin({
              created: function () {
                // 逻辑...
               }
              ...
           })

           // 4. 添加实例方法
          Vue.prototype.$myMethod = function (methodOptions) {
              // 逻辑...
          }
       }
    }

2、使用插件，通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

四、总结

• 一般是需要动态插入一个组件时，我们就需要用到Vue.extend()，new了之后，你可以给里面传一些自己需要的选项，然后mount()一下，就可以把这个实例.$elappend到页面body里（记住，一定是实例.$el，document.body.appendChild(toast.$el)）;
• 然后再结合插件功能，就可以全局使用这个功能了；