Differences and descriptions

The difference between

I have known about Vue's prototype prototype and know what it is, but I only know how to use it, but I don't know what it means. Let’s take a look today.

Example

// Introduce public method extensionimport common from '@/prototypeEx/'
 = common
// Introduce public cache methodimport cacheEx from '@/prototypeEx/'
 = cacheEx
// Introduce big data display plug-inconst echarts = require('echarts')
.$echarts = echarts
 
import uploader from 'vue-simple-uploader'
(uploader)
// Public components that attract their own encapsulation of global registrationimport ztable from '@/components/'
(ztable)

Answer (I suddenly realized after reading it)

There is no essential difference between it and it is just a layer encapsulating on the basis of it. Their implementation principles are all about adding a method to the registration of plug-ins outside the Vue ecosystem and plug-ins inside the Vue ecosystem.

Analysis process

1. The $echarts variable is added before it to prevent it from being accidentally overwritten by variables in the component.

Source code

 = function (plugin) {
if () {
  return;
}
// additional parameters
var args = toArray(arguments, 1);
(this);
if (typeof  === 'function') {
  (plugin, args);
} else {
  (null, args);
}
 = true;
return this;
};
 
Let's take a look at a plugininstallMethod content， We actually saw it.$toast = toast;,
// Prepare the install method to use ()const install = function (Vue) {
if () return;
 = true;
 
// Hang the wrapped toast on the Vue prototype as a method on the Vue instance.$toast = toast;
}

summary:

After reading the source code, I realized that the ```mainly executes the `install` method, and the `install`` method is mainly executed.

Therefore, in fact, the core of the `()` method is ``, but it is encapsulated with another layer, which is more flexible and has better scalability.

### Summary Understanding vue as a tree, both `` and `` are ways to mount plugins on this tree. The difference is that using ``. The plugin does not need to implement the `install` method. It is simple and crude, and can be used when used, but its flexibility is not as good as `()`. However, `()` requires that the plugin must implement the `install` method or the plugin itself is a function, and the `install` method can complete its own logic, so the `()` method is more powerful, flexible and more extensible.

However, there is no distinction between the two, but they have their own application scenarios. ``` is suitable for plug-ins that are not Vue ecosystems, while `()` is suitable for plug-ins in Vue ecosystems, such as echarts. The two cooperate with each other, one is simple and practical, and the other is flexible and extensible. Moreover, the implementation of `` relies on ``, and the most essential understanding is that `` is wrapped in `` and further encapsulated.

Questions about and ()

Problem description

In the file, what is the difference between registering plug-ins through two ways: ?

Each Vue component is an instance of Vue, so this component can get the properties and methods added on it.

() is equivalent to using a middleware to register a third-party library.

// In the component, use this.$post to use the methodimport request from 'utils/request'
.$post = 
 
import Antd from 'ant-design-vue'
import db from 'utils/localstorage'
 
(Antd)
({
  install (Vue) {
    .$db = db
  }
})
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

First of all, no matter which method you use, the final implementation of the call method is

()

In other words, the implementation principle of both methods is added to the principle of adding a method. So the conclusion is "no difference".

Let’s talk about what () did.

We know that () lets us install a custom Vue plugin. To do this, we need to declare an install function

// Create a simple pluginvar install = function(Vue) {
  if () return // If you have registered, skip it   = true
 
  (, {
    $say: {
      value: function() {('I am a plugin')}
    }
  })
}
 = install

Then we need to register this plugin

import say from './'
import Vue from 'vue'
 
(say)

In this way, we can call the say method in every instance of Vue.

Let's see how the method is implemented internally

 = function (plugin) {
  if () {
    return;
  }
  // additional parameters
  var args = toArray(arguments, 1);
  (this);
  if (typeof  === 'function') {
    (plugin, args);
  } else {
    (null, args);
  }
   = true;
  return this;
};

In fact, it just called the install method.

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.