Vue.use和mixin

Vue.use解析

//main.js  
import myPlugin from './components/myPlugin/index'  //引入插件
Vue.use(myPlugin) //默认调用myPlugin里面的install方法，如果没有则直接执行install函数

//index.js

//1. 插件是一个对象，有install方法
export default {
    install(_){
        // console.log(_);  //就是Vue类
        // 1.添加全局方法或属性
        _.myGlobalMethod=function(){

        }
        // 2.添加实例方法
        _.prototype.myPluginFn=function(){
            alert(this.name)
        }
        //3.添加全局资源。指令/过滤器/过渡/组件
        _.directive('my_directive',function(el,obj){

        })
        // 4.注入选项组件
        _.mixin({

        })
    }
}

//2. 插件直接是一个函数
function fn(_){
    _.prototype.myPluginFn=function(){
        alert(this.name);
    }
}
export default fn;

Vue.use的源码

import { toArray } from '../util/index'

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))//installedPlugins中保存的是Vue中安装的插件
    //Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
    if (installedPlugins.indexOf(plugin) > -1) {
      return this   //this就是Vue
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    //如果插件中有install方法，则将带有Vue的参数传给插件，并让其执行install方法 即plugin.install=function(Vue,option){};如果插件本身是一个函数，则插件执行
    if (typeof plugin.install === 'function') {
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
}

Vue.mixin

若混入中的data属性与组件内部的data属性重复时，以组件内部为准;
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。
钩子函数若重复，则都会执行；先执行混入的钩子函数，后执行组件的钩子函数。

全局混入：把所有的配置项混入到每一个实例中。

//main.js
Vue.mixin({
  data(){
    return{
      mixinProp1:123,
      mixinProp2:345,
    }
  },
  mounted(){
     console.log("混入的mounted")
  },
  methods:{
    mixinFn(){
      console.log("这是混入的方法")
    }
  }
})

局部混入： 谁引入谁混入

//mixin.js
export default{
    created(){
        console.log("这是局部混入")
    }
}

要混入的组件

import mixin from './mixin'
export default {
  mixins:[mixin]  //数组形式表明可以同时混入多个mixin
}

Vue.extend
Vue.extend(options) :用基础 Vue 构造器，创建一个“子类”。
data 选项是特例， 在 Vue.extend() 中它必须是函数