Does it matter?

It doesn’t matter, interviews always ask how to mount a method/property on an instance of Vue, i.e.Vue.prototype“But suddenly someone asks what they’re related to each other.I think there’s an article onlineVue.prototype.$xxVue. Use is used, but does not explain the use of VueVue.prototype.$xxWhy can it be inside a componentthis.$xxSo I’m going to talk about it in detail.

What can you learn?

After reading this article, you will know how to define a Vue plug-in and how vue.prototype.$xx works.


Use ele. me UI as an example

The following is the introduction code of the ELE. me UI, which you should be familiar with.

import Vue from 'vue'
import Element from 'element-ui'
Copy the code

Now, what is this Element

Here we seeElementIt’s an object. It hasversionAnd so on, and one of theminstallHe is the subject of this article.Vue.useThat’s what we’re going to runinstallThe corresponding function.

The smallest structure

Write a minimum of code to demonstrate how to initialize a plug-in with vue.use:

/ / the plugin
const plugin = {
    document.write('I'm code inside Install')}}// Initialize the plug-in
Vue.use(plugin); // The page says "I am the code inside Install"
Copy the code

To see the implementation of the plugin, see…


  1. Vue’s plug-in is oneobject, likeElement.
  2. The plug-inobjectThere must beinstallField.
  3. installA field is a function.
  4. Initialize the plug-inobjectNeed to pass throughVue.use().

Extend the learning

  1. Vue.use()The call must be made innew VueBefore.
  2. The same plugin that uses vue.use () more than once will only be run once.


Ok, let’s go back to the above image and see if we can see the familiar code:

Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; .Copy the code

Prototype I’m sure you all know how to use prototype. I’ve done my research so I won’t be repetitive, but I find that people don’t seem to know why.


Why did vue.prototype. $alert() get initialized and then run this.$alert() inside any component? First, we need to understand the three concepts of constructors, instances, and prototypes.

Constructor, Instance, prototype

These 3 concepts are a little cliche, baidu search a lot of explanations, LET me first give an example and Vue analogy you will understand them.

First, I’ll write A fake Vue. We’ll call it AVue. Well, he’s A fake.

1. AVue is a constructor

Here we only simulate the methods function.

function AVue({methods}){
	for(let key in methods){
		this[key] = methods[key]; }}Copy the code

2. Put one on the AVue prototype$alert

AVue.prototype.$alert = () = >{document.write('I'm a fake! ')}
Copy the code

3. Instantiate AVue

When we instantiate AVue, we know that we will pass in an object containing data/methods, etc., just like our AVue. Let’s make AVue instantiate like Vue:

// I only copy methods, so I can only learn them
const av = new AVue({
    methods: {
            this.$alert(); }}});// Call say
av.say(); // I am a fake!
Copy the code

Preview on Codepen


Vue. Prototype. $xx is a feature of a function prototype that can be read on any instance of the function after it has been instantiated.


Vue lets you know about defineProperty and we can use it ourselves, such as making vue. prototype unwritable to prevent overwriting.

Object.defineProperty(Vue.prototype, '$alert', {
    writable: false.value(){
        console.log('I'm a pawn! ')}});Copy the code

Practice after class

It is suggested that you can write a vue plugin to practice, for example, my practice project is him:

Lollipop: Command calls to vue…

WeChat group

Thank you for reading, if you have any questions you can add group 🚀, there are a lot of interesting front end friends in the group, let’s learn and grow together!

You can also add me to wechat, and I will pull you into the wechat group (Tencent limits the number of people in the wechat group to 100, so I must pull you into the group when the number exceeds 100).