深入Vue3源码，看看Vue.use后究竟发生了什么？

从全局注册组件库入手
如果我们自定义了几个自定义组件，当我们想在.vue文件中使用它们时，需要手动import导入组件并在component中注册：

复制代码
通过Vue.use将ElementPlus全局注册后，所有的组件都可以在.vue的标签中直接使用，不需要再导入、注册。
import ElementPlus from ‘element-plus’
Vue.use(ElementPlus)
复制代码
这个过程里Vue.use究竟为我们做了哪些事？
假设我此时有两个自定义组件ZiuInput与ZiuButton位于@/module/ZiuUI/component目录下，我希望能通过Vue.use达到像ElementPlus那样免导入注册就能直接使用的效果。
于是我在ZiuUI目录下创建了index.js，并在其中编写以下代码：
// @/module/ZiuUI/index.js

import ZiuInput from ‘./component/ziu-input.vue’
import ZiuButton from ‘./component/ziu-button.vue’

const components = [ ZiuInput, ZiuButton ]

const ZiuUI = {
install(Vue) {
// 注册组件
components.forEach(component => {
Vue.component(component.name, component)
})
}
}

export default ZiuUI
复制代码
当我们将ZiuUI这个对象传给Vue.use()时，Vue会自动调用其中的install方法，并将Vue实例传入其中，那么我们就可以在install方法中实现组件的全局注册。
// @/main.js

import Vue from ‘vue’
import App from ‘./App’
import ZiuUI from ‘./module/ZiuUI’

Vue.use(ZiuUI) // 将ZiuUI传入Vue.use()
…
复制代码
深入源码
下载Vue3的源码阅读，我们可以发现use相关的代码：
use(plugin: Plugin, …options: any[]) {
// 组件已经被安装了若是开发环境则抛出警告
if (installedPlugins.has(plugin)) {
DEV && warn(Plugin has already been applied to target app.)
}
// 组件未安装且install方法为函数那么执行安装并调用install方法
// installedPlugins是一个Set 用于记录已经安装的组件
else if (plugin && isFunction(plugin.install)) {
installedPlugins.add(plugin)
plugin.install(app, …options)
}
// 传入Vue.use本身就是一个函数那么执行这个函数
else if (isFunction(plugin)) {
installedPlugins.add(plugin)
plugin(app, …options)
}
// 如果当前为开发环境且Vue.use未传参则抛出警告
else if (DEV) {
warn(
A plugin must either be a function or an object with an "install" +
function.
)
}
// 执行结束返回App本身便于链式调用
return app
}
复制代码
手动引入&注册组件
有时候，我们不希望全局注册一个组件库，导致整个项目体积变得巨大，而是希望能只引入某些用到的组件，但是又不想用到一个组件就需要手动的导入、注册。
除了使用组件库提供的自动导入插件，我们还可以手动实现一个“半自动导入组件”的功能。
编写一个register-element.ts文件，将所有我们项目中需要用到的组件都在此文件中引入并注册。
// register-element.ts

declare function require(moduleName: string): void
import type { App } from ‘vue’

import ‘element-plus/theme-chalk/base.css’
import ‘element-plus/theme-chalk/dark/css-vars.css’
import ‘element-plus/theme-chalk/el-loading.css’
import {
ElButton,
ElTabs,
ElTabPane
} from ‘element-plus’

const components = [
ElButton,
ElTabs,
ElTabPane
]

export default function registerElement(app: App): void {
components.forEach(© => {
const name = transferCamel(c.name)
// 引入组件样式将驼峰改为-分隔命名
require(element-plus/theme-chalk/${name}.css)
// 注册组件
app.component(name, c)
})
}

function transferCamel(camel: string): string {
return camel
.replace(/([A-Z])/g, ‘-$1’)
.toLowerCase()
.slice(1)
}
复制代码
阅读完源码我们发现，如果为Vue.use()传入的是一个函数，那么Vue会将app实例传入并调用这个函数。因此，我们只需要在main.ts中在App实例上链式调用.use方法，并将registerElement函数传入，那么Vue会自动将app实例传入并调用这个方法：
// main.ts

import { createApp } from ‘vue’
import App from ‘./App.vue’
import registerElement from ‘./global/register-element.ts’

const app = createApp(App).use(registerElement)
app.mount(‘#app’)
复制代码
当有新的需要使用的组件时，只需要到register-element.ts文件中引入一次即可。

深入Vue3源码，看看Vue.use后究竟发生了什么？相关推荐

跟尤雨溪一起解读Vue3源码笔记- Vue Mastery
P1.介绍 1.什么是DOM或文档对象模型? HTML映射到一系列DOM节点,我们可以使用JavaScript进行操作 let item = document.getElementsByTagName ...
学习尤雨溪写的 Vue3 源码中的简单工具函数
大家好,我是若川.最近组织了源码共读活动.每周读 200 行左右的源码.很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习. 初学者也能看懂的 Vue3 源码 ...
初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
1. 前言大家好,我是若川.最近组织了源码共读活动.每周读 200 行左右的源码.很多第一次读源码的小伙伴都感觉很有收获,感兴趣可以加我微信ruochuan12,拉你进群学习. 写相对很难的源码,耗 ...
vue3源码分析--真的有必要掌握框架的细枝末节吗？
古人云:工欲善其事必先利其器,磨刀不误砍柴工.但是砍柴的人需要知道怎么制作刀吗? 注意:本文先分析要不要学源码,然后分析要不要掌握源码的每一个细枝末节(深究技术)!!! 为什么要学源码为了面试被迫学 ...
Vue3源码分析之打包原理
Vue3源码分析之打包原理如果之前你已经看过我的<Vue3源码分析之入门>,那么你可以直接阅读此篇文章 Vue3源码分析之入门一.配置环境 1. 全局安装yarn Monorepo 管 ...
Vue3源码解析之入门
Vue3源码分析之入门本文主要是针对想自学Vue3之类的框架源码的,却不知道如何上手的小伙伴们~ Vue3源码GitHub地址 Vue3源码克隆路径 :git@github.com:vuejs/co ...
vue函数如何调用其他函数?_从源码中学Vue（一）生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
field list什么意思_从源码中学Vue(六)「解密」为什么操作数组的方法也会触发视图更新...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) 上一章节我大概分析了下在Vue中的 Watcher.Observer.Dep三者的关系,以及如何检测数 ...
推荐 7 个 Vue2、Vue3 源码解密分析的开源项目
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ 1. 为什么要学习源码 ? 阅读优秀的代码的目的是让我们能够写出优秀的代码. 不给自己设限,不要让你周围人的技术上限成为你的上限.其 ...

深入Vue3源码，看看Vue.use后究竟发生了什么？

深入Vue3源码，看看Vue.use后究竟发生了什么？相关推荐

最新文章

热门文章