Vue应用API——use解析
admin
2024-04-04 22:15:56
0

文章目录

  • 一、app.use
    • 1.使用场景
    • 2.原理
  • 二、封装自定义插件
    • 1.写法一
    • 2.写法二
    • 3.应用插件
    • 4.注意事项
  • 总结


一、app.use

1.使用场景

  不论是Vue2中的Vue.use亦或者Vue3中的app.use。其功能主要是用在插件的安装上,往往是在项目的入口文件(比如main.js)中。被use的插件多数是 NPM 中的第三方库 。在必要的时候,也可以封装一个自定义的插件以供团队的使用。这样可以避免反复开发同一个功能。

2.原理

  从Vue源码对 app.use 描述可以看出,app.use(plugin) 中的核心部分“plugin(app, …options)”“plugin.install(app, …options)” 这两句;
  也就是说,app.use(plugin),本质上就是把plugin中的 install 方法调用一遍
  不仅如此,还可以发现 Vue 框架在 install 函数中暴露了 app实例, 所以在实际开发中能挂载到 app实例上的都可以在install函数中实现,然后通过app.use()将插件快速地应用到各个项目中;
  由此看来,我们也可以通过封装自定义插件供开发使用。

二、封装自定义插件

  一个插件可以是一个拥有 install() 方法的对象,也可以直接是一个安装函数本身

1.写法一

拥有 install() 方法的对象

// 写法一:对象中定义 install 函数
let myPlugin = {install(app) {// 定义一个实例方法app.config.globalProperties.sayHello = function () {alert('Hello, Nancy!');}// 定义一个全局指令:元素挂载后"自动聚焦"及"动态绑定数据"app.directive('myModel', {mounted(el, binding) {el.focus();el.value = binding.value;},})// 定义一个全局按钮组件app.component('el-button', {name: "el-button",template: ''})}
}
export default myPlugin;

2.写法二

直接是一个安装函数本身

// 写法二:直接定义 install 函数
let install = function (app, options) {// 定义一个实例方法app.config.globalProperties.sayHello = function () {alert('Hello, Nancy!');}// 定义一个全局指令:元素挂载后"自动聚焦"及"动态绑定数据"app.directive('myModel', {mounted(el, binding, vnode, prevNode) {el.focus();el.value = binding.value;},})// 定义一个全局按钮组件app.component('el-button', {name: "el-button",template: ''})
}
export default install;

3.应用插件

应用自定义插件(main.js)

import myPlugin from './plugin/myPlugin';
// 自动调用插件 myPlugin 的 install 方法
app.use(myPlugin);

组件中测试


效果

4.注意事项

  注意:不要滥用插件,多个项目都需要使用时才抽离成一个Vue插件,然后封装成一个Npm包。


总结

  app.use 在 Vue 中的作用主要是帮助团队将一些在各个部门中都需要使用的公共的与业务无关的部分从现有业务中抽离出来,形成一个独立的和业务无关的第三方库,以便在下次项目中直接通过use使用。NPM上就有大量的第三方库或者组件等,例如moment、element-ui等都属于与业务无关但是又经常使用的公共部分,便可以采用这种方法引入。

相关内容

热门资讯

我的电脑一开机,日期就自动变成... 我的电脑一开机,日期就自动变成2005年怎么弄的?你主板的电脑没电了CR2032型号的,买新的更换即...
是不是加拿大有很多地没有人耕种... 是不是加拿大有很多地没有人耕种啊,需要农场主?知道的没有,介绍下,谢谢!是的,尤其是在草原三省,只要...
幼儿了解中秋节的教育意义 幼儿了解中秋节的教育意义1、通过各种活动,让幼儿知道阴历八月十五是中秋节,初步了解中秋节的来历,知道...
抗战馆恢复开放首日,观众:展厅... 7月8日,北京的天气有些闷热,不到下午1点,中国人民抗日战争纪念馆门外已排起了队伍,不少观众向门口的...
地下城怎么转职,我是鬼剑士怎么... 地下城怎么转职,我是鬼剑士怎么转神枪手啊-急当TX倒闭的时候或许你就可以鬼剑转神枪手了等待吧鬼剑士不...
3秒抢3个,二手溢价超600元... 今天(7月8日)起 迪士尼上新夏日单品 就是下面这几个娃娃 在官方线上平台 这几个娃娃一上线就秒没...
7月11日,凉山彝族火把节等你... 红星新闻网(记者 李婉清)7月8日报道7月8日,省政府新闻办在四川省新闻发布厅举行“万千气象看四川・...
暑假这样过才叫爽!超全攻略让你... 暑假终于来了!是不是已经按捺不住内心的激动,迫不及待想要开启快乐时光了呢?别急,让我为你奉上一份超全...
求姓名藏头诗一首,给女朋友的,... 求姓名藏头诗一首,给女朋友的,她叫刘树红要古体诗七言那种,意境要美要押韵你乃本是天生仙,与我相聚下凡...
希望大家给我介绍几本关于人生经... 希望大家给我介绍几本关于人生经历方面的好书,谢谢了!!!《让方向更清晰!!》作者:爱琳·C卡瑟拉《《...
海贼王萨博在德雷斯罗萨回忆里得... 海贼王萨博在德雷斯罗萨回忆里得知艾斯的死讯是在哪集?没有具体说明在哪集,那只是个回忆片段而已。动漫里...
武林外传里佟掌柜儿时的好友说的... 武林外传里佟掌柜儿时的好友说的是什么地方的方言?一楼的,是陕西话那为什么和佟掌柜说的不一样?是陕西话...
用英语以春节为题的手抄报 春节... 用英语以春节为题的手抄报 春节英语手抄报小学生春节英语手抄报教程关于春节的英语手抄报怎么画春节英语手...
大学生研发校徽月饼是什么样子的... 大学生研发校徽月饼是什么样子的?大学生研发“校徽月饼”走红 原料取材学校培育作物。陕西大学生研发“彩...
《潜伏》中,晚秋是个什么样的人... 《潜伏》中,晚秋是个什么样的人?结局如何晚秋有着悲惨的命运,一直深爱着孙红蕾,最后孙红蕾在香港执行任...
我爱上了我的小学女同桌,我13... 我爱上了我的小学女同桌,我13岁13岁 好小的年龄呀!暗恋两年也不错,主要是你们太小了,现在你们懂得...
TVB出过一个动画是在讲一些章... TVB出过一个动画是在讲一些章鱼小丸子的故事的叫什么?【是在一个类似放学ICY的节目播的】章鱼小超人...
谁有周建龙版的 有声小说 盗墓... 谁有周建龙版的 有声小说 盗墓笔记 7 8 部 分享下 谢谢盗吧首页吧规+资源,甭找了,就没这东西周...
当你一个人在深夜发呆的时候 会... 当你一个人在深夜发呆的时候 会听什么歌?推荐几首好听的额你喜欢悲伤的还是节奏性强的啊?
搞笑一家人剧情 搞笑一家人剧情尤美喜欢谁?我觉得才开始尤美喜欢允浩,允浩也喜欢尤美,只是尤美误会是她爸爸杀了开成嫂的...