study/ZiuChen.github.io
1
0
Fork 0
mirror of https://github.com/ZiuChen/ZiuChen.github.io.git synced 2025-08-18 07:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity
ZiuChen.github.io/article/深入Vue3源码，看看Vue.use后究竟发生了什么？.html

122 lines
78 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>深入Vue3源码，看看Vue.use后究竟发生了什么？ | ZiuChen</title>
<meta name="description" content="Unlimited Progress.">
<link rel="preload stylesheet" href="/assets/style.275d0d0a.css" as="style">
<script type="module" src="/assets/app.e7bd02ab.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/framework.abedd97e.js">
<link rel="modulepreload" href="/assets/chunks/theme.7ca09a1e.js">
<link rel="modulepreload" href="/assets/article_深入Vue3源码，看看Vue.use后究竟发生了什么？.md.90f944dc.lean.js">
<link rel="icon" href="/logo.png">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-7a6cea33><!--[--><!--]--><!--[--><span tabindex="-1" data-v-5f1bf755></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-5f1bf755> Skip to content </a><!--]--><!----><header class="VPNav" data-v-7a6cea33 data-v-3a18c829><div class="VPNavBar has-sidebar" data-v-3a18c829 data-v-1b2815df><div class="container" data-v-1b2815df><div class="title" data-v-1b2815df><div class="VPNavBarTitle has-sidebar" data-v-1b2815df data-v-1e59ca87><a class="title" href="/" data-v-1e59ca87><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-ccf440f7><!--]--><!--[-->ZiuChen<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-1b2815df><div class="curtain" data-v-1b2815df></div><div class="content-body" data-v-1b2815df><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-1b2815df><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg class="DocSearch-Search-Icon" width="20" height="20" viewBox="0 0 20 20" aria-label="search icon"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1b2815df data-v-0d82d2f2><span id="main-nav-aria-label" class="visually-hidden" data-v-0d82d2f2>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-0d82d2f2 data-v-b46cf0af data-v-8fe481ea><!--[-->首页<!--]--><!----></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-0d82d2f2 data-v-b50a22ea><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b50a22ea><span class="text" data-v-b50a22ea><!----> 我的项目 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-b50a22ea><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-b50a22ea><div class="VPMenu" data-v-b50a22ea data-v-922429a3><div class="items" data-v-922429a3><!--[--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/project/ClipboardManager/" data-v-24309b78 data-v-8fe481ea><!--[-->超级剪贴板<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/project/Markdown/" data-v-24309b78 data-v-8fe481ea><!--[-->超级Markdown<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/project/JSRunner/" data-v-24309b78 data-v-8fe481ea><!--[-->超级JavaScript<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/project/SmartWordBreak/" data-v-24309b78 data-v-8fe481ea><!--[-->超级分词<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-0d82d2f2 data-v-b50a22ea><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b50a22ea><span class="text" data-v-b50a22ea><!----> 开源作品 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-b50a22ea><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-b50a22ea><div class="VPMenu" data-v-b50a22ea data-v-922429a3><div class="items" data-v-922429a3><!--[--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/works/opensource.html" data-v-24309b78 data-v-8fe481ea><!--[-->个人作品<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/works/contribution.html" data-v-24309b78 data-v-8fe481ea><!--[-->社区贡献<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-0d82d2f2 data-v-b50a22ea><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-b50a22ea><span class="text" data-v-b50a22ea><!----> 学习笔记 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="text-icon" data-v-b50a22ea><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="menu" data-v-b50a22ea><div class="VPMenu" data-v-b50a22ea data-v-922429a3><div class="items" data-v-922429a3><!--[--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/JavaScript.html" data-v-24309b78 data-v-8fe481ea><!--[-->JavaScript基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/CSS.html" data-v-24309b78 data-v-8fe481ea><!--[-->CSS基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/JavaScriptEnhanced.html" data-v-24309b78 data-v-8fe481ea><!--[-->JavaScript进阶<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/Front-end%20Engineering.html" data-v-24309b78 data-v-8fe481ea><!--[-->前端工程化<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/SSR.html" data-v-24309b78 data-v-8fe481ea><!--[-->服务端渲染<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/React.html" data-v-24309b78 data-v-8fe481ea><!--[-->React基础<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/React%20Hooks.html" data-v-24309b78 data-v-8fe481ea><!--[-->React Hooks<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/Redux.html" data-v-24309b78 data-v-8fe481ea><!--[-->Redux<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/React%20Router.html" data-v-24309b78 data-v-8fe481ea><!--[-->React Router<!--]--><!----></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-922429a3 data-v-24309b78><a class="VPLink link" href="/note/MySQL.html" data-v-24309b78 data-v-8fe481ea><!--[-->MySQL<!--]--><!----></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/self/" tabindex="0" data-v-0d82d2f2 data-v-b46cf0af data-v-8fe481ea><!--[-->个人介绍<!--]--><!----></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1b2815df data-v-5d8e5634><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-5d8e5634 data-v-cbb74a31 data-v-8bd12372><span class="check" data-v-8bd12372><span class="icon" data-v-8bd12372><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-cbb74a31><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-cbb74a31><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1b2815df data-v-075317c7 data-v-698b8333><!--[--><a class="VPSocialLink" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-698b8333 data-v-884cf77f><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-698b8333 data-v-884cf77f><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1b2815df data-v-337936da data-v-b50a22ea><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-b50a22ea><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-b50a22ea><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-b50a22ea><div class="VPMenu" data-v-b50a22ea data-v-922429a3><!----><!--[--><!--[--><!----><div class="group" data-v-337936da><div class="item appearance" data-v-337936da><p class="label" data-v-337936da>Appearance</p><div class="appearance-action" data-v-337936da><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="toggle dark mode" aria-checked="false" data-v-337936da data-v-cbb74a31 data-v-8bd12372><span class="check" data-v-8bd12372><span class="icon" data-v-8bd12372><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-cbb74a31><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-cbb74a31><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="group" data-v-337936da><div class="item social-links" data-v-337936da><div class="VPSocialLinks social-links-list" data-v-337936da data-v-698b8333><!--[--><a class="VPSocialLink" href="https://github.com/ZiuChen" aria-label="github" target="_blank" rel="noopener" data-v-698b8333 data-v-884cf77f><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><a class="VPSocialLink" href="https://juejin.cn/user/1887205216238477" aria-label target="_blank" rel="noopener" data-v-698b8333 data-v-884cf77f><svg width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z" fill="#1E80FF"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1b2815df data-v-6a3f6c55><span class="container" data-v-6a3f6c55><span class="top" data-v-6a3f6c55></span><span class="middle" data-v-6a3f6c55></span><span class="bottom" data-v-6a3f6c55></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-7a6cea33 data-v-163ef388><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-163ef388><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-163ef388><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-163ef388>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-163ef388 data-v-bc2c8509><button data-v-bc2c8509>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-7a6cea33 data-v-2f75884a><div class="curtain" data-v-2f75884a></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-2f75884a><span class="visually-hidden" id="sidebar-aria-label" data-v-2f75884a> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-2f75884a><section class="VPSidebarItem level-0" data-v-2f75884a data-v-3ae94607><div class="item" role="button" tabindex="0" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><h2 class="text" data-v-3ae94607>我的项目</h2><!----></div><div class="items" data-v-3ae94607><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/project/ClipboardManager/" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>超级剪贴板</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/project/Markdown/" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>超级Markdown</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/project/JSRunner/" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>超级JavaScript</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/project/SmartWordBreak/" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>超级分词</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2f75884a><section class="VPSidebarItem level-0 collapsible collapsed" data-v-2f75884a data-v-3ae94607><div class="item" role="button" tabindex="0" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><h2 class="text" data-v-3ae94607>开源作品</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-3ae94607><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-3ae94607><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-3ae94607><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/works/opensource.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>个人作品</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/works/contribution.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>社区贡献</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2f75884a><section class="VPSidebarItem level-0 collapsible has-active" data-v-2f75884a data-v-3ae94607><div class="item" role="button" tabindex="0" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><h2 class="text" data-v-3ae94607>文章归档</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-3ae94607><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-3ae94607><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-3ae94607><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E3%80%902023%E3%80%91%E9%9D%92%E8%AE%AD%E8%90%A5%20-%20%E5%89%8D%E7%AB%AF%E7%BB%83%E4%B9%A0%E9%A2%98%E6%B1%87%E6%80%BB%E8%A7%A3%E6%9E%90.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>【2023】青训营 - 前端练习题汇总解析</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E3%80%90%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>【字节跳动】前端面试题总结</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E3%80%90%E5%BF%AB%E6%89%8B%E3%80%91%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>【快手】深入理解前端面试题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E3%80%90%E7%94%A8%E5%8F%8B%E9%87%91%E8%9E%8D%E3%80%91%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98%E6%80%BB%E7%BB%93.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>【用友金融】前端面试题总结</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1%E4%B8%8E%E4%BA%8B%E4%BB%B6%E6%8D%95%E8%8E%B7.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>一文读懂事件冒泡与事件捕获</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E4%BC%AA%E7%B1%BB%E4%B8%8E%E4%BC%AA%E5%85%83%E7%B4%A0.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>一文读懂伪类与伪元素</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E4%B8%80%E6%96%87%E8%AF%BB%E6%87%82%E5%87%BD%E6%95%B0%E4%B8%ADthis%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>一文读懂函数中this指向问题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E4%BB%8E0%E5%AE%9E%E7%8E%B0%E4%B8%80%E4%B8%AA%E5%B9%B4%E5%BA%A6%E6%8A%A5%E5%91%8A.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>从0实现一个年度报告</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E6%8D%AE%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6%E3%80%81%E5%AD%98%E5%82%A8%E5%B1%9E%E6%80%A7%E6%8F%8F%E8%BF%B0%E7%AC%A6.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>彻底搞懂对象的数据属性描述符、存储属性描述符</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B5%85%E6%9E%90defineProperty%E4%B8%8EProxy%E5%AE%9E%E7%8E%B0%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>浅析defineProperty与Proxy实现的双向绑定</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5JavaScript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>深入JavaScript数据类型</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5Vue3%E6%BA%90%E7%A0%81%EF%BC%8C%E7%9C%8B%E7%9C%8BVue.use%E5%90%8E%E7%A9%B6%E7%AB%9F%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>深入Vue3源码，看看Vue.use后究竟发生了什么？</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>深入理解Proxy与Reflect</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>深入理解浏览器缓存机制</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E6%B5%8F%E8%A7%88%E5%99%A8%E8%BF%90%E8%A1%8C%E5%8E%9F%E7%90%86.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>深入理解浏览器运行原理</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><div class="group" data-v-2f75884a><section class="VPSidebarItem level-0 collapsible collapsed" data-v-2f75884a data-v-3ae94607><div class="item" role="button" tabindex="0" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><h2 class="text" data-v-3ae94607>学习笔记</h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-3ae94607><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="caret-icon" data-v-3ae94607><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></div></div><div class="items" data-v-3ae94607><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/JavaScript.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>JavaScript基础</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/CSS.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>CSS基础</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/JavaScriptEnhanced.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>JavaScript进阶</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/Front-end%20Engineering.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>前端工程化</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/SSR.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>服务端渲染</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/React.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>React基础</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/React%20Hooks.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>React Hooks</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/Redux.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>Redux</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/React%20Router.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>React Router</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3ae94607 data-v-3ae94607><div class="item" data-v-3ae94607><div class="indicator" data-v-3ae94607></div><a class="VPLink link link" href="/note/MySQL.html" data-v-3ae94607 data-v-8fe481ea><!--[--><p class="text" data-v-3ae94607>MySQL</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-7a6cea33 data-v-1e214902><div class="VPDoc has-sidebar has-aside" data-v-1e214902 data-v-bf62dcc7><!--[--><!--]--><div class="container" data-v-bf62dcc7><div class="aside" data-v-bf62dcc7><div class="aside-curtain" data-v-bf62dcc7></div><div class="aside-container" data-v-bf62dcc7><div class="aside-content" data-v-bf62dcc7><div class="VPDocAside" data-v-bf62dcc7 data-v-d9018125><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-d9018125 data-v-436eb827><div class="content" data-v-436eb827><div class="outline-marker" data-v-436eb827></div><div class="outline-title" data-v-436eb827>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-436eb827><span class="visually-hidden" id="doc-outline-aria-label" data-v-436eb827> Table of Contents for current page </span><ul class="root" data-v-436eb827 data-v-44a4c21e><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-d9018125></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-bf62dcc7><div class="content-container" data-v-bf62dcc7><!--[--><!--]--><!----><main class="main" data-v-bf62dcc7><div style="position:relative;" class="vp-doc _article_%E6%B7%B1%E5%85%A5Vue3%E6%BA%90%E7%A0%81%EF%BC%8C%E7%9C%8B%E7%9C%8BVue_use%E5%90%8E%E7%A9%B6%E7%AB%9F%E5%8F%91%E7%94%9F%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F" data-v-bf62dcc7><div><h1 id="深入vue3源码-看看vue-use后究竟发生了什么" tabindex="-1">深入Vue3源码，看看Vue.use后究竟发生了什么？ <a class="header-anchor" href="#深入vue3源码-看看vue-use后究竟发生了什么" aria-label="Permalink to &quot;深入Vue3源码，看看Vue.use后究竟发生了什么？&quot;">​</a></h1><h2 id="从全局注册组件库入手" tabindex="-1">从全局注册组件库入手 <a class="header-anchor" href="#从全局注册组件库入手" aria-label="Permalink to &quot;从全局注册组件库入手&quot;">​</a></h2><p>如果我们自定义了几个自定义组件，当我们想在<code>.vue</code>文件中使用它们时，需要手动<code>import</code>导入组件并在<code>component</code>中注册：</p><div class="language-html line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> CustomInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/component/CustomInput.vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">component</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> CustomInput</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><p>通过<code>Vue.use</code>将<code>ElementPlus</code>全局注册后，所有的组件都可以在<code>.vue</code>的<code>&lt;template&gt;</code>标签中直接使用，不需要再导入、注册。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ElementPlus </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element-plus</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(ElementPlus)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>这个过程里<code>Vue.use</code>究竟为我们做了哪些事？</p><p>假设我此时有两个自定义组件<code>ZiuInput</code>与<code>ZiuButton</code>位于<code>@/module/ZiuUI/component</code>目录下，我希望能通过<code>Vue.use</code>达到像<code>ElementPlus</code>那样免导入注册就能直接使用的效果。</p><p>于是我在<code>ZiuUI</code>目录下创建了<code>index.js</code>，并在其中编写以下代码：</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// @/module/ZiuUI/index.js</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuInput </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./component/ziu-input.vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuButton </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./component/ziu-button.vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> components </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [ ZiuInput</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> ZiuButton ]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> ZiuUI </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">install</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">Vue</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 注册组件</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">components</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;font-style:italic;">component</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">component</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">component</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">component</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> ZiuUI</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><p>当我们将<code>ZiuUI</code>这个对象传给<code>Vue.use()</code>时，<code>Vue</code>会自动调用其中的<code>install</code>方法，并将<code>Vue</code>实例传入其中，那么我们就可以在<code>install</code>方法中实现组件的全局注册。</p><div class="language-js line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// @/main.js</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./App</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> ZiuUI </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./module/ZiuUI</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(ZiuUI) </span><span style="color:#676E95;font-style:italic;">// 将ZiuUI传入Vue.use()</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="深入源码" tabindex="-1">深入源码 <a class="header-anchor" href="#深入源码" aria-label="Permalink to &quot;深入源码&quot;">​</a></h2><p>下载Vue3的源码阅读，我们可以发现<code>use</code>相关的代码：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(plugin: Plugin</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options: any[]) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 组件已经被安装了 若是开发环境 则抛出警告</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">has</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">__DEV__</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">warn</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">Plugin has already been applied to target app.</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 组件未安装 且install方法为函数 那么执行安装 并调用install方法</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// installedPlugins是一个Set 用于记录已经安装的组件</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&amp;&amp;</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">isFunction</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">install</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">plugin</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">install</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 传入Vue.use本身就是一个函数 那么执行这个函数</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#82AAFF;">isFunction</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">installedPlugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">add</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">plugin</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">plugin</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">...</span><span style="color:#A6ACCD;">options</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 如果当前为开发环境 且Vue.use未传参 则抛出警告</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">__DEV__</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">warn</span><span style="color:#F07178;">(</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">A plugin must either be a function or an object with an &quot;install&quot; </span><span style="color:#89DDFF;">`</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">function.</span><span style="color:#89DDFF;">`</span></span>
<span class="line"><span style="color:#F07178;"> )</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 执行结束 返回App本身便于链式调用</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br></div></div><h2 id="手动引入-注册组件" tabindex="-1">手动引入&amp;注册组件 <a class="header-anchor" href="#手动引入-注册组件" aria-label="Permalink to &quot;手动引入&amp;注册组件&quot;">​</a></h2><p>有时候，我们不希望全局注册一个组件库，导致整个项目体积变得巨大，而是希望能只引入某些用到的组件，但是又不想用到一个组件就需要手动的导入、注册。</p><p>除了使用组件库提供的自动导入插件，我们还可以手动实现一个“半自动导入组件”的功能。</p><p>编写一个<code>register-element.ts</code>文件，将所有我们项目中需要用到的组件都在此文件中引入并注册。</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// register-element.ts</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">declare</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">moduleName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">type</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">App</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element-plus/theme-chalk/base.css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element-plus/theme-chalk/dark/css-vars.css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element-plus/theme-chalk/el-loading.css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElButton</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElTabs</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ElTabPane</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">element-plus</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> components </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
<span class="line"><span style="color:#A6ACCD;"> ElButton</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> ElTabs</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> ElTabPane</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">registerElement</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">app</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">App</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">void</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">components</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">c</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">transferCamel</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">c</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">name</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 引入组件样式 将驼峰改为-分隔命名</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">require</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">`</span><span style="color:#C3E88D;">element-plus/theme-chalk/</span><span style="color:#89DDFF;">${</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">.css</span><span style="color:#89DDFF;">`</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 注册组件</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">component</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">c</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">transferCamel</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">camel</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">camel</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/([</span><span style="color:#C3E88D;">A-Z</span><span style="color:#89DDFF;">])/</span><span style="color:#F78C6C;">g</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-$1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">toLowerCase</span><span style="color:#F07178;">()</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">slice</span><span style="color:#F07178;">(</span><span style="color:#F78C6C;">1</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br></div></div><p>阅读完源码我们发现，如果为<code>Vue.use()</code>传入的是一个函数，那么Vue会将app实例传入并调用这个函数。因此，我们只需要在<code>main.ts</code>中在<code>App</code>实例上链式调用<code>.use</code>方法，并将<code>registerElement</code>函数传入，那么Vue会自动将<code>app</code>实例传入并调用这个方法：</p><div class="language-ts line-numbers-mode"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// main.ts</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createApp</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./App.vue</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> registerElement </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./global/register-element.ts</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> app </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createApp</span><span style="color:#A6ACCD;">(App)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(registerElement)</span></span>
<span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">mount</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">#app</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span></span></code></pre><div class="line-numbers-wrapper" aria-hidden="true"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>当有新的需要使用的组件时，只需要到<code>register-element.ts</code>文件中引入一次即可。</p><h2 id="参考阅读" tabindex="-1">参考阅读 <a class="header-anchor" href="#参考阅读" aria-label="Permalink to &quot;参考阅读&quot;">​</a></h2><p><a href="https://vuejs.org/api/application.html#app-use" target="_blank" rel="noreferrer">Vue文档: App.use</a></p><p><a href="https://vuejs.org/guide/reusability/plugins.html" target="_blank" rel="noreferrer">Vue文档: Plugins</a></p></div></div></main><footer class="VPDocFooter" data-v-bf62dcc7 data-v-6ea060cd><!--[--><!--]--><div class="edit-info" data-v-6ea060cd><div class="edit-link" data-v-6ea060cd><a class="VPLink link edit-link-button" href="https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/article/深入Vue3源码，看看Vue.use后究竟发生了什么？.md" target="_blank" rel="noreferrer" data-v-6ea060cd data-v-8fe481ea><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="edit-link-icon" aria-label="edit icon" data-v-6ea060cd><path d="M18,23H4c-1.7,0-3-1.3-3-3V6c0-1.7,1.3-3,3-3h7c0.6,0,1,0.4,1,1s-0.4,1-1,1H4C3.4,5,3,5.4,3,6v14c0,0.6,0.4,1,1,1h14c0.6,0,1-0.4,1-1v-7c0-0.6,0.4-1,1-1s1,0.4,1,1v7C21,21.7,19.7,23,18,23z"></path><path d="M8,17c-0.3,0-0.5-0.1-0.7-0.3C7,16.5,6.9,16.1,7,15.8l1-4c0-0.2,0.1-0.3,0.3-0.5l9.5-9.5c1.2-1.2,3.2-1.2,4.4,0c1.2,1.2,1.2,3.2,0,4.4l-9.5,9.5c-0.1,0.1-0.3,0.2-0.5,0.3l-4,1C8.2,17,8.1,17,8,17zM9.9,12.5l-0.5,2.1l2.1-0.5l9.3-9.3c0.4-0.4,0.4-1.1,0-1.6c-0.4-0.4-1.2-0.4-1.6,0l0,0L9.9,12.5z M18.5,2.5L18.5,2.5L18.5,2.5z"></path></svg> Edit this page on GitHub<!--]--><!----></a></div><div class="last-updated" data-v-6ea060cd><p class="VPLastUpdated" data-v-6ea060cd data-v-d0fbcfc6>Updated Date: <time datetime="2023-06-26T04:12:27.000Z" data-v-d0fbcfc6></time></p></div></div><div class="prev-next" data-v-6ea060cd><div class="pager" data-v-6ea060cd><a class="pager-link prev" href="/article/%E6%B7%B1%E5%85%A5JavaScript%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B.html" data-v-6ea060cd><span class="desc" data-v-6ea060cd>Previous page</span><span class="title" data-v-6ea060cd>深入JavaScript数据类型</span></a></div><div class="has-prev pager" data-v-6ea060cd><a class="pager-link next" href="/article/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3Proxy%E4%B8%8EReflect.html" data-v-6ea060cd><span class="desc" data-v-6ea060cd>Next page</span><span class="title" data-v-6ea060cd>深入理解Proxy与Reflect</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-7a6cea33 data-v-b27e7c74><div class="container" data-v-b27e7c74><p class="message" data-v-b27e7c74>Released under the MIT License.</p><p class="copyright" data-v-b27e7c74>Copyright © 2019-present Ziu Chen</p></div></footer><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"article_【2023】青训营 - 前端练习题汇总解析.md\":\"799ccd2d\",\"article_【字节跳动】前端面试题总结.md\":\"171f019e\",\"article_【快手】深入理解前端面试题.md\":\"1b063a6e\",\"article_【用友金融】前端面试题总结.md\":\"d86f78e1\",\"article_一文读懂事件冒泡与事件捕获.md\":\"abbd9e98\",\"article_一文读懂伪类与伪元素.md\":\"ea703ef4\",\"article_一文读懂函数中this指向问题.md\":\"33df65f1\",\"article_从0实现一个年度报告.md\":\"9c33d590\",\"article_彻底搞懂对象的数据属性描述符、存储属性描述符.md\":\"51d6d189\",\"article_浅析defineproperty与proxy实现的双向绑定.md\":\"389ab73a\",\"article_深入javascript数据类型.md\":\"35750bd3\",\"article_深入vue3源码，看看vue.use后究竟发生了什么？.md\":\"90f944dc\",\"article_深入理解proxy与reflect.md\":\"b0dd72e3\",\"article_深入理解浏览器缓存机制.md\":\"6aabd983\",\"article_深入理解浏览器运行原理.md\":\"4d71653c\",\"index.md\":\"91022c9a\",\"note_mysql.md\":\"4b49aa43\",\"note_react router.md\":\"c427ec0a\",\"project_jsrunner_log_index.md\":\"7e299b1d\",\"note_css.md\":\"89743c04\",\"project_markdown_shortcut_index.md\":\"d320d66e\",\"project_markdown_index.md\":\"6b2d4618\",\"project_markdown_log_index.md\":\"3956db99\",\"note_react hooks.md\":\"2e7181f0\",\"project_smartwordbreak_log_index.md\":\"5245223e\",\"project_smartwordbreak_statement_index.md\":\"10c20a45\",\"self_index.md\":\"5db078b6\",\"works_opensource.md\":\"6ff81eb2\",\"project_clipboardmanager_vip_index.md\":\"c8a1562a\",\"note_ssr.md\":\"aa5bf193\",\"works_contribution.md\":\"a7e5c707\",\"note_redux.md\":\"83130032\",\"project_clipboardmanager_guide_index.md\":\"da3650ba\",\"project_clipboardmanager_log_index.md\":\"16a6bfd2\",\"note_javascript.md\":\"ab887461\",\"project_clipboardmanager_index.md\":\"afd1b1fc\",\"project_jsrunner_index.md\":\"d1f1c41a\",\"project_smartwordbreak_index.md\":\"0548778e\",\"project_clipboardmanager_statement_index.md\":\"51ec4bc2\",\"note_front-end engineering.md\":\"6fc08108\",\"note_javascriptenhanced.md\":\"9f8ec66a\",\"note_react.md\":\"b21c455f\"}")
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"ZiuChen\",\"description\":\"Unlimited Progress.\",\"base\":\"/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"学习笔记\",\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"},{\"text\":\"React基础\",\"link\":\"/note/React\"},{\"text\":\"React Hooks\",\"link\":\"/note/React Hooks\"},{\"text\":\"Redux\",\"link\":\"/note/Redux\"},{\"text\":\"React Router\",\"link\":\"/note/React Router\"},{\"text\":\"MySQL\",\"link\":\"/note/MySQL\"}]},{\"text\":\"个人介绍\",\"link\":\"/self/\"}],\"sidebar\":[{\"text\":\"我的项目\",\"items\":[{\"text\":\"超级剪贴板\",\"link\":\"/project/ClipboardManager/\"},{\"text\":\"超级Markdown\",\"link\":\"/project/Markdown/\"},{\"text\":\"超级JavaScript\",\"link\":\"/project/JSRunner/\"},{\"text\":\"超级分词\",\"link\":\"/project/SmartWordBreak/\"}]},{\"text\":\"开源作品\",\"collapsed\":true,\"items\":[{\"text\":\"个人作品\",\"link\":\"/works/opensource\"},{\"text\":\"社区贡献\",\"link\":\"/works/contribution\"}]},{\"text\":\"文章归档\",\"collapsed\":true,\"items\":[{\"text\":\"【2023】青训营 - 前端练习题汇总解析\",\"link\":\"/article/【2023】青训营 - 前端练习题汇总解析\"},{\"text\":\"【字节跳动】前端面试题总结\",\"link\":\"/article/【字节跳动】前端面试题总结\"},{\"text\":\"【快手】深入理解前端面试题\",\"link\":\"/article/【快手】深入理解前端面试题\"},{\"text\":\"【用友金融】前端面试题总结\",\"link\":\"/article/【用友金融】前端面试题总结\"},{\"text\":\"一文读懂事件冒泡与事件捕获\",\"link\":\"/article/一文读懂事件冒泡与事件捕获\"},{\"text\":\"一文读懂伪类与伪元素\",\"link\":\"/article/一文读懂伪类与伪元素\"},{\"text\":\"一文读懂函数中this指向问题\",\"link\":\"/article/一文读懂函数中this指向问题\"},{\"text\":\"从0实现一个年度报告\",\"link\":\"/article/从0实现一个年度报告\"},{\"text\":\"彻底搞懂对象的数据属性描述符、存储属性描述符\",\"link\":\"/article/彻底搞懂对象的数据属性描述符、存储属性描述符\"},{\"text\":\"浅析defineProperty与Proxy实现的双向绑定\",\"link\":\"/article/浅析defineProperty与Proxy实现的双向绑定\"},{\"text\":\"深入JavaScript数据类型\",\"link\":\"/article/深入JavaScript数据类型\"},{\"text\":\"深入Vue3源码，看看Vue.use后究竟发生了什么？\",\"link\":\"/article/深入Vue3源码，看看Vue.use后究竟发生了什么？\"},{\"text\":\"深入理解Proxy与Reflect\",\"link\":\"/article/深入理解Proxy与Reflect\"},{\"text\":\"深入理解浏览器缓存机制\",\"link\":\"/article/深入理解浏览器缓存机制\"},{\"text\":\"深入理解浏览器运行原理\",\"link\":\"/article/深入理解浏览器运行原理\"}]},{\"text\":\"学习笔记\",\"collapsed\":true,\"items\":[{\"text\":\"JavaScript基础\",\"link\":\"/note/JavaScript\"},{\"text\":\"CSS基础\",\"link\":\"/note/CSS\"},{\"text\":\"JavaScript进阶\",\"link\":\"/note/JavaScriptEnhanced\"},{\"text\":\"前端工程化\",\"link\":\"/note/Front-end Engineering\"},{\"text\":\"服务端渲染\",\"link\":\"/note/SSR\"},{\"text\":\"React基础\",\"link\":\"/note/React\"},{\"text\":\"React Hooks\",\"link\":\"/note/React Hooks\"},{\"text\":\"Redux\",\"link\":\"/note/Redux\"},{\"text\":\"React Router\",\"link\":\"/note/React Router\"},{\"text\":\"MySQL\",\"link\":\"/note/MySQL\"}]}],\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/ZiuChen\"},{\"icon\":{\"svg\":\"<svg width=\\\"36\\\" height=\\\"28\\\" viewBox=\\\"0 0 36 28\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"><path fill-rule=\\\"evenodd\\\" clip-rule=\\\"evenodd\\\" d=\\\"M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z\\\" fill=\\\"#1E80FF\\\"/></svg>\"},\"link\":\"https://juejin.cn/user/1887205216238477\"}],\"editLink\":{\"pattern\":\"https://github.com/ZiuChen/ZiuChen.github.io/edit/main/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2019-present Ziu Chen\"},\"lastUpdatedText\":\"Updated Date\",\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"LFZ2CPWWUG\",\"apiKey\":\"b4fd296ea5e467b3ac4a582160ff3122\",\"indexName\":\"ziuchenio\"}}},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink