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()
中它必须是函数