This is the 8th day of my participation in the August Text Challenge.More challenges in August

One, foreword

In the previous part, Vue components and initialization process were introduced, involving the following parts:

  • Component usage, including: component definition and priority;
  • Component initialization process introduction, including: vue.component, vue.extend, global component constructor save, component hierarchy maintenance, component merge, component render and update;

This article mainly introduces Vue.com Ponent

Second, Vue.component implementation

1. How to load Vue.com Ponent

Vue.com Ponent is a global API;

When Vue initializes init, the global API is processed centrally:

// src/index.js

/** * All functionality in VUE is added via prototype extension (prototype mode) *@param {*} Options vue instantiates the passed configuration object */
function Vue(options) {
    this._init(options);  // Call method _init on Vue prototype
}

initMixin(Vue)
renderMixin(Vue)
lifeCycleMixin(Vue)
initGlobalAPI(Vue) // Initialize the global Api

export default Vue;
Copy the code

The initGlobalAPI method handles the global API:

// src/global-api/index.js

export function initGlobalAPI(Vue) {
  // Global properties: vue.options
  // Mixin, Component, filte, directive
  Vue.options = {}; 
  
  Vue.mixin = function (options) {
    this.options = mergeOptions(this.options, options);
    return this;  // Return this, providing a chained call
  }
  
  /**
   * Vue.component API
   * @param {*} Id Component name *@param {*} Definition Component definition */
  Vue.component = function (id, definition) {}}Copy the code

2. How to define Vue.com Ponent

// Method definition
Vue.component = function (id, definition) {}
  
// The usage mode
Vue.component('my-button', {name:'my-button'.template:''
})
Copy the code

2.1 Component Name Name

Each component has its own name, which is the unique identity of the component;

  • The default component name is id, which is the first parameter of Vue.component.
  • If definition has name, use the name value as the component name;
/**
  * Vue.component
  * @param {*} Id Component name *@param {*} Definition Component definition */
Vue.component = function (id, definition) {
  definition.name = definition.name || id;
}
Copy the code

2.2 Component Definition definition

Vue.com Ponent’s second argument, Definition, is the component definition.

A component definition can be either a function or an object:

  • Vue.extend({ /* … */ }
  • {/ *… * /}
Method 1: Register the component and pass in an extended constructor
Vue.component('my-component', Vue.extend({ / *... * / })) 

// Write 2: register the component and pass in an option object (automatically call vue.extend)
Vue.component('my-component', { / *... * / }) 

// Get the registered component (always return constructor)
var MyComponent = Vue.component('my-component')
Copy the code

If definition is an object, vue.extend is used once inside the vue.componentmethod:

// src/global-api/index.js

/** * Create a subclass * using the base Vue constructor@param {*} definition* /
Vue.extend = function (definition) {}/**
  * Vue.component
  * @param {*} Id Component name *@param {*} Definition Component definition: object or function */
Vue.component = function (id, definition) {
  // Get the component name name: Definition. Name is preferred and id is used by default
  let name = definition.name || id;
  definition.name = name;

  // If definition is passed in as an object, we need to wrap it with vue.extend
  if(isObject(definition)){
    definition = Vue.extend(definition)
  }
}
Copy the code

Vue.extend: Create a subclass using the base Vue constructor;

The next chapter is detailed: [Vue2. X source code learning] thirty-six - vue.extend implementationCopy the code

Global saving of component constructors

In the initGlobalAPI method, vue. options is used to store global properties; In global components, global properties are also used; Therefore, global components should also be registered with vue.options;

So, extend Vue.options.components to hold global components:

// src/global-api/index.js

export function initGlobalAPI(Vue) {
  // Global properties: vue.options
  // Mixin, Component, filte, directive
  Vue.options = {}; // When each component is initialized, these properties are put into the component
  // Used to store global components
  Vue.options.components = {};
  
  /** * Create a subclass * using the base Vue constructor@param {*} definition 
   */
  Vue.extend = function (definition) {}/**
   * Vue.component
   * @param {*} Id Component name (default) *@param {*} Definition Component definition: may be an object or a function */
  Vue.component = function (id, definition) {

    // Get the component name name: Definition. Name is preferred and id is used by default
    let name = definition.name || id;
    definition.name = name;

    // If definition is passed in as an object, we need to wrap it with vue.extend
    if(isObject(definition)){
      definition = Vue.extend(definition)
    }

    // Save the Definition object globally: Vue.options.componentsVue.options.components[name] = definition; }}Copy the code

Vue.options.com Ponents maintains a global mapping between component names and component constructors.

Purpose and function of this:

  • Facilitate subsequent access to the globalvm.constructor.optionsMerge global and local components;
  • In this way, you can directly find the constructor of the component based on the tag of the virtual node of the component and instantiate the component.

4, Vue.com Ponent summary

  • Vue.com Ponent is a Vue Global API;
  • Global component declaration by calling Vue.com Ponent;
  • During Vue initialization, Vue.com Ponent internally generates subclasses of vuue. Extend, which are component constructors;
  • Maintains the mapping between component names and component constructors toVue.options.componentsFor subsequent component merge and component instantiation;

Third, the end

Note: Vue.com Ponent API in the component initialization process is introduced separately, so the content may be inconsistent and there may be some omissions. I will continue to write the component initialization process next week, and continue to supplement and improve it during the process.

This article mainly introduces Vue.com Ponent implementation in Vue initialization process:

  • Vue.com Ponent global API initialization process;
  • Vue.com Ponent definition and parameter description;
  • How and what component constructors are stored globally;

Next, vue. extend implementation;

Maintain a log

  • 20210809:
    • Fix misspelled method names;
    • Fine-tuning article typesetting;
  • 20210811:
    • Add code examples for both “component definition Definition”;
    • Adjust part of the description statement, make the semantics more appropriate to understand;
    • Fine-tune part of the typesetting order to make the relationship between the text and code examples clear;
    • Add the Vue.com Ponent Summary section