当前位置: 首页 > Web前端 > vue.js

学习vue源码(五)手写Vue.use、Vue.minxin、Vue.compile

时间:2023-03-31 16:33:24 vue.js

1.Vue.useVue.use(plugin);(1)参数{对象|Function}plugin(2)Usage安装Vue.js插件。如果plugin是一个对象,则必须提供install方法。如果插件是一个函数,它将被用作安装方法。在调用install方法时,Vue会作为参数传入。当同一个插件多次调用install方法时,该插件只会安装一次。如何在线开发Vue插件,请阅读这篇文章,非常简单,不到两分钟就可以看完:如何开发Vue插件?(3)注册插件,只需要调用install方法,将Vue作为参数传入即可。但是具体有两部分逻辑需??要处理:1.插件的类型可以是install方法,也可以是包含install方法的对象。2、插件只能安装一次,确保插件列表中没有重复的插件。(4)实现Vue.use=function(plugin){constinstalledPlugins=(this._installedPlugins||(this._installedPlugins=[]));if(installedPlugins.indexOf(plugin)>-1){返回这个;}constargs=toArray(arguments,1);args.unshift(这个);如果(typeofplugin.install==='function'){plugin.install.apply(插件,args);}elseif(typeofplugin==='function'){plugin.apply(null,plugin,args);}installedPlugins.push(插件);returnthis;}1.在Vue.js中添加use方法,并接收一个参数plugin。2.首先判断插件是否已经注册。如果已经注册,则直接终止该方法的执行。这时候只需要indexOf方法即可。3、toArray方法我们在学习vue源码(1)事件相关的手写实例方法上面已经讲过了,就是把类数组转成真正的数组。使用toArray方法获取参数。除了第一个参数,其余所有参数将结果列表赋值给args,然后将Vue添加到args列表的最前面。这样做的目的是保证执行install方法时第一个参数为vue,其余参数为注册插件时传入的参数。4、由于plugin参数支持object和function类型,通过判断plugin.install和plugin之间哪个是function,就可以知道用户使用的是什么类型的plugin,然后执行用户写的plugin,传入args作为参数。5、最后将插件添加到installedPlugins中,保证同一个插件不会被重复注册。2.Vue.mixinVue.mixin(mixin);(一)Parameter{Object}mixin(二)用法1.全局注册一个mixin(混合),影响后面创建的每一个Vue.js实例。2.插件作者可以使用mix-ins将自定义行为注入组件(例如:monitorlifecyclehooks)。不建议在应用程序代码中使用。Vue.mixin({created:function({varmyOption=this.$options.myOption;if(myOption){console.log(myOption);}})})newVue({myOption:'hello!'})//=>“你好!”(3)Vue.mixin方法注册后,会影响之后创建的每一个Vue.js实例,因为这个方法会改变Vue.options属性。(4)实现import{mergeOptions}from'../util/index'exportfunctioninitMixin(Vue){Vue.mixin=function(minxin){this.options=mergeOptions(this.options,mixin);归还这个;}}1。mergeOptions会将用户传入的mixin和this.options合并成一个新对象,然后用生成的新对象覆盖this.options属性,其中this.options实际上是Vue.options。mergeOptions的具体实现,后面会讲到。2.因为mixin方法修改了Vue.options属性,后面创建的每个实例都会用到这个属性,所以会影响创建的每个实例。3.Vue.compileVue.compile(tempalte);(1)参数{string}template(2)Usage编译模板字符串,返回一个包含渲染函数的对象。仅适用于完整版。varres=Vue.compile('

{{msg}}
');newVue({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方法前面已经讲过了,这里不再赘述。