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

This article mainly shows you the "plug-in mechanism in Vue and install example analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "plug-in mechanism in Vue and install example analysis" this article.

1. The processing of install in Vuex&Vue-Router

Here are two questions that you can think about as digging holes, and then answer them one by one:

Why can we use $router $store directly in the project to get the values and some methods?

Why the use of both plug-ins is first introduced using Vue.use. Then create the instance and pass in the Vue instance

The two principles are actually the same. Here we use Vue-Router as an example. First, let's take a look at the specific implementation of its internal install:

Class Router {constructor (options) {...}} Router.install = function (_ Vue) {_ Vue.mixin ({beforeCreate () {if (this.$options.router) {_ Vue.prototype.$router = this.$options.router})} export default Router

What is the global blending of _ Vue.mixin? It is equivalent to mixing this method into all components.

What is beforeCreate? A lifecycle of Vue, of course, executed before create

That being the case, let's make a bold judgment. Vue-Router actually uses a global mix in the install function to mount the this.$options.router to the Vue prototype when the beforeCreate life cycle is triggered, so that we can use this.$router to call the router instance. Classmate: wait a minute, stopstoppers! You said I was Sister Li, but this.$options.router, what is this thing, where did it come from?

Come on, we've just solved the first problem, so let's fill in the second hole.

We usually use Vue-Router, and the Vue instance that defines the entry file looks something like this

/ / router/index.jsimport VueRouter form 'vue-router';import Vue from' vue';Vue.use (VueRouter); const _ router = [...] const Router = new VueRouter (_ router); export default Router;// main.jsimport Vue from 'vue';import router from' router';new Vue ({router,...}). $mount ('# app')

Combined with the initial example, let's analyze a wave.

Vue.use () mainly calls the install method inside the plug-in and passes in the Vue instance as a parameter

The above uses this.$options.router,options, which usually represents the configuration item.

In main.js, we pass the Router instance into the Vue instance as a configuration item

Ding! Factor detection, let's speculate boldly. Vue-Router first use is actually a global blending. In order to obtain the router instance in the configuration item of the Vue root instance at the right time, mount it. Then, when the new Vue () root instance is created, the router instance is injected, and then the lifecycle in the global blending is triggered. At this time, the configuration item this.$options of the root instance already contains the router instance, and the mount process is finally completed! Just this part of the code is also logical meticulous, clever programming ideas, people call the expert ah! Brother Meng, put the expert on the public screen, hhhh.

Second, the internal implementation of install in Vue

After reading the use of the commonly used library install, I don't know if you have gained anything. Next, after the warm-up, we can start to take a look at the internal implementation of install, first on the source code.

Export function initUse (Vue: GlobalAPI) {/ / register a use method mounted on the instance Vue.use = function (plugin: Function | Object) {/ / initialize the array of the current plug-in const installedPlugins = (this._installedPlugins | | (this._installedPlugins = []) / / if the plug-in has already been registered Then let's not deal with if (installedPlugins.indexOf (plugin) >-1) {return this}. / / here comes the point! If (typeof plugin.install = = 'function') {/ / when install is a function in the plug-in, call the install method, point to the plug-in, and pass a number of parameters to plugin.install.apply (plugin, args)} else if (typeof plugin = =' function') {/ / when the plug-in itself is a function, treat it as an install method and point to the plug-in And pass a number of parameters into plugin.apply (null, args)} / / put the plug-in into the plug-in array installedPlugins.push (plugin) return this}}

This part of the source code is very concise and highly readable. It is in use that the plug-in type is determined and the install or plug-in itself is executed. In fact, the explanation of the official website is that the plug-in of the Class class should expose an install method.

The above is all the content of the article "plug-in Mechanism in Vue and sample Analysis of install". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.