Vue.use()在new Vue() 之前使用的原因浅析
网络编程 2021-07-04 15:51www.168986.cn编程入门
本文通过实例代码给大家介绍了为什么Vue.use()在new Vue() 之前使用,需要的朋友可以参考下
使用Vue前端框架开发有些时间了,官方文档对于插件开发也有详细的介绍。最近强迫症犯了,老在想为什么Vue.use函数执行,要在Vue实例化即new Vue(options)
之前。解铃还须系铃人,这个问题只能通过看源码解决,于是。。。
先看Vue.use做了什么
Vue.use = function (plugin: Function | Object) { //Vue构造函数上定义_installedPlugins 避免相同的插件注册多次 const installedPlugins = (this._installedPlugins || (this._installedPlugins = [])) // import是单例模式 //所以plugin不论是Fuction还是Object同一个插件都是同一个 if (installedPlugins.indexOf(plugin) > -1) { return this } // additional parameters const args = toArray(arguments, 1) // Vue作为第一个参数传递给插件 args.unshift(this) if (typeof plugin.install === 'function') { plugin.install.apply(plugin, args) } else if (typeof plugin === 'function') { plugin.apply(null, args) } installedPlugins.push(plugin) return this // 返回的是this,可以链式调用 }
do:
- 检查插件是否已经注册,相同的插件只注册一次
- 将Vue构造函数作为第一个参数,作为插件注册调用
- 根据插件形式选择调用
plugin.install
还是plugin - 存储已注册插件,用于插件是否已注册检验
Vue.prototype._init中合并options Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag ... vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) ... // 挂载到dom上 if (vm.$options.el) { vm.$mount(vm.$options.el) } }
在new Vue(options)
时会执行this._init进行初始化,将Vue上的属性和options进行合并,然后在进行事件、生命周期等的初始化。beforeCreate,created生命周期的hook函数也是在这里进行调用
如果Vue.use在new Vue()
之后执行,this._init()
时你使用的插件的内容还没有添加到Vue.options.ponents、Vue.options.directives、Vue.options.filters等属性中。所以新初始化的Vue实例中也就没有插件内容
以上所述是长沙网络推广给大家介绍的Vue.use()在new Vue() 之前使用的原因浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程