Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the implementation principle of Vue3.0 plug-in". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the implementation principle of Vue3.0 plug-in" can help you solve the problem.

First, write plug-ins

The Vue project can use many plug-ins to enrich its features, such as Vue-Router, Vuex... So many plug-ins for us to use, saving us a lot of manpower and material resources, then these plug-ins are developed? Whether we want to have our own vue plug-in, here's how to write our own Vue plug-in.

1.1 Object containing the install () method

A Vue plug-in can be an Object object that contains an install method, and the install method is called when the plug-in is called

As follows:

Export default {/ / receives two parameters / / app: instance of the application context / / options: options entered by the plug-in install: (app, options) = > {console.log ('app', app); console.log (' options', options); / / do some processing / /... }} 1.2 the way through function

The Vue plug-in can also be a function function, and when the plug-in is called, the function function itself is called.

As follows:

Export default function TestPlugin (app, options) {console.log ('app', app); console.log (' options', options);} II. Use plug-ins

The above has explained how to write your own plug-ins, after the plug-ins are written, you need to use these plug-ins, so how should these plug-ins be used? In fact, it is very simple to use, and the corresponding use method is provided on the instance of the application context.

App.use (plugin, [options]); / / returns an application instance, so it can chain add new plug-ins. 3. How app.use () executes the plug-in

Why can app.use () use these plug-ins? In the spirit of "knowing what it is and why", let's pick why. The following is the corresponding source code:

Function createApp (rootComponent, rootProps = null) {/ /. Const installedPlugins = new Set (); const app = (context.app = {/ /. Use (plugin,... options) {if (installedPlugins.has (plugin)) {warn (`Plugin has already been applied to target app.`);} else if (plugin & & shared.isFunction (plugin.install)) {installedPlugins.add (plugin); plugin.install (app,... options) } else if (shared.isFunction (plugin)) {installedPlugins.add (plugin); plugin (app, .options);} else {warn (`A plugin must either be a function or an object with an "install" `+ `function.`);} return app }, / /. }); return app;}

The above code is easy to read and implements the following things:

Use the Set structure to store the plug-in and throw an exception when the plug-in exists

Execute the corresponding plug-in by determining whether there is an install method or whether it is a function

Pass in the app context instance and options as parameters when executing the plug-in

This is the end of the content about "what is the principle of Vue3.0 plug-in implementation". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.