学习vue源码（5） 手写Vue.use、Vue.minxin、Vue.compile_vue.js

一、Vue.use

Vue.use(plugin);

（1）参数

{ Object | Function } plugin

（2）用法

安装Vue.js插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。调用install方法时，会将Vue作为参数传入。install方法被同一个插件多次调用时，插件也只会被安装一次。

关于如何上开发Vue插件，请看这篇文章，非常简单，不用两分钟就看完：如何开发 Vue 插件？

（3）作用

注册插件，此时只需要调用install方法并将Vue作为参数传入即可。但在细节上有两部分逻辑要处理：

1、插件的类型，可以是install方法，也可以是一个包含install方法的对象。

2、插件只能被安装一次，保证插件列表中不能有重复的插件。

（4）实现

Vue.use = function(plugin){
 const installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
 if(installedPlugins.indexOf(plugin)>-1){
  return this;
 }
 <!-- 其他参数 -->
 const args = toArray(arguments,1);
 args.unshift(this);
 if(typeof plugin.install === 'function'){
  plugin.install.apply(plugin,args);
 }else if(typeof plugin === 'function'){
  plugin.apply(null,plugin,args);
 }
 installedPlugins.push(plugin);
 return this;
}

1、在Vue.js上新增了use方法，并接收一个参数plugin。

2、首先判断插件是不是已经别注册过，如果被注册过，则直接终止方法执行，此时只需要使用indexOf方法即可。

3、toArray方法我们在学习vue源码（1） 手写与事件相关的实例方法已经提到过，就是将类数组转成真正的数组。使用toArray方法得到arguments。除了第一个参数之外，剩余的所有参数将得到的列表赋值给args，然后将Vue添加到args列表的最前面。这样做的目的是保证install方法被执行时第一个参数是Vue，其余参数是注册插件时传入的参数。

4、由于plugin参数支持对象和函数类型，所以通过判断plugin.install和plugin哪个是函数，即可知用户使用哪种方式祖册的插件，然后执行用户编写的插件并将args作为参数传入。

5、最后，将插件添加到installedPlugins中，保证相同的插件不会反复被注册。

二、Vue.mixin

Vue.mixin(mixin);

（1）参数

{ Object } mixin

（2）用法

1、全局注册一个混入（mixin），影响之后创建的每个Vue.js实例。

2、插件作者可以使用混入向组件注入自定义行为（例如：监听生命周期钩子）。不推荐在应用代码中使用。

Vue.mixin({
 created:function({
  var myOption = this.$options.myOption;
  if(myOption){
   console.log(myOption);
  }
 })
})
 
new Vue({
 myOption:'hello!'
})
// => "hello!"

（3）Vue.mixin方法注册后，会影响之后创建的每个Vue.js实例，因为该方法会更改Vue.options属性。

（4）实现

import { mergeOptions } from '../util/index'
 
export function initMixin(Vue){
 Vue.mixin = function(minxin){
  this.options = mergeOptions(this.options,mixin);
  return this;
 }
}

1、mergeOptions会将用户传入的mixin与this.options合并成一个新对象，然后将这个生成的新对象覆盖this.options属性，这里的this.options其实就是Vue.options。​​mergeOptions​​的具体实现，我们后面再讲。

2、因为mixin方法修改了Vue.options属性，而之后创建的每个实例都会用到该属性，所以会影响创建的每个实例。

三、Vue.compile

Vue.compile(tempalte);

（1）参数

{ string } template

（2）用法

编译模板字符串并返回包含渲染函数的对象。只在完整版中才有效。

var res = Vue.compile('<div><span>{{msg}}</span></div>');
new Vue({
 data:{
  msg:'hello'
 },
 render:res.render
})

（3）并不是所有Vue.js的构建版本都存在Vue.compile方法。与vm.$mount类似，Vue.compile方法只存在于完整版中。（只有完整版包含编译器）

（4）实现

Vue.compile方法只需要调用编译器就可以实现功能。

Vue.compile = compileToFunctions;

compileToFunctions方法可以将模板编译成渲染函数。

​​compileToFunctions​​​函数，我们在学习vue源码（4） 手写vm.$mount方法已经讲到了，这里将不再赘述。