手写 vue.use Vue.compile Vue.mixin

 一、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方法 已经讲到了，这里将不再赘述。