How to resolve the source code of Vue components and the source code of vue Components

How to resolve the source code of Vue components and the source code of vue Components

On the official website, component inheritance is divided into two categories: global components and local components. Either way, the most important thing is to create components, and then register components according to different scenarios.

Remember that "Vue. js components are actually extended Vue instances "!

1. Global Components

// Method 1 var MyComponent = Vue. extend ({name: 'My-component ', template:' <div> A custom component! </Div> '}); Vue. component ('My-component ', MyComponent); // method 2 Vue. component ('My-component ', {name: 'My-component', template: '<div> A custom component! </Div> '}); // use the <div id = "example"> <my-component> </div>

Two static methods are involved:

1. Vue.extend: Create a component by extending the Vue instance
2. Vue.component: Register Components

Let's take a lookVue.extendSource code. for explanations, see Chinese notes:

Vue. extend = function (extendOptions) {extendOptions = extendOptions | |{}; var Super = this; var isFirstExtend = Super. cid === 0; if (isFirstExtend & extendOptions. _ Ctor) {return extendOptions. _ Ctor;} var name = extendOptions. name | Super. options. name; // if there is a name attribute, that is, the component name, check whether the name spelling is legal if ('development '! = 'Production ') {if (! /^ [A-zA-Z] [\ w-] * $ /. test (name) {warn ('invalidcomponent name: "'+ name + '". component names '+ 'Can only contain alphanumeric characaters and the hyphen. '); name = null ;}// create a VueComponent constructor named 'vuecomponent' or name var Sub = createClass (name | 'vuecomponent '); // The constructor prototype inherits Vue. prototype Sub. prototype = Object. create (Super. prototype); Sub. prototype. constructor = Sub; Sub. cid = cid ++; // merge Vue. options and extendOptions are the static attributes of the new constructor, options Sub. options = mergeOptions (Super. options, extendOptions); // the 'super' Static Property directs to the Vue Function Sub ['super'] = super; // start ----------------- copy the Vue static method // allow further extension Sub. extend = Super. extend; // create asset registers, so extended classes // can have their private assets too. config. _ assetTypes. forEach (function (type) {Sub [type] = Super [type];}); // end --------------- copy Vue static method // enable recursive self-lookup if (name) {Sub. options. components [name] = Sub;} // cache constructor: cache this constructor if (isFirstExtend) {extendOptions. _ Ctor = Sub;} return Sub ;};

As you can see,Vue.extendThe key point is: Create a constructorfunction VueComponent(options) { this._init(options) }，Inherit the attributes and methods on the Vue prototype through the prototype chain, and then assign the static function of Vue to the constructor.

Let's take a look.Vue.componentSource code. for explanations, see Chinese notes:

// _ AssetTypes: ['component', 'ctive Ve', 'elementctive', 'filter', 'transition ', 'partial'] config. _ assetTypes. forEach (function (type) {// static method Vue. component Vue [type] = function (id, definition) {if (! Definition) {return this. options [type +'s '] [id];} else {/* istanbul ignore if */if ('development '! = 'Production ') {if (type = 'component' & (commonTagRE. test (id) | reservedTagRE. test (id) {warn ('Do not use built-in or reserved HTML elements as component '+ 'id:' + id );}} // if the second parameter is a simple object, you must use Vue. extend Create component constructor if (type = 'component' & isPlainObject (definition) {if (! Definition. name) {definition. name = id;} definition = Vue. extend (definition);} // Add component functions to the static attributes of Vue options. this component is injected globally in components. options [type + 's'] [id] = definition; return definition ;}};});

MethodVue.componentThe key point is to inject component functions into the static attributes of Vue. In this way, you can find the corresponding constructor Based on the component name to create a component instance.

2. Local Components

var MyComponent = Vue.extend({  template: '<div>A custom component!</div>'});new Vue({  el: '#example',  components: {    'my-component': MyComponent,    'other-component': {      template: '<div>A custom component!</div>'    }  }});

Registering a local component is characterized by definingcomponentsAttribute, which is a simple object. The key value is the component name. value can be a specific component function or an options object required for creating a component.

Let's take a look at how Vue resolvescomponentsAttribute. For explanation, see Chinese notes:

Vue. prototype. _ init = function (options) {options = options | {};.... // merge options. options = this. $ options = mergeOptions (this. constructor. options, options, this );...}; function mergeOptions (parent, child, vm) {// parse the components attribute guardComponents (child); guardProps (child );...} function guardComponents (options) {if (options. components) {// convert the object to an array var components = options. components = guardA RrayAssets (options. components); // The ids array contains the component name var ids = Object. keys (components); var def; if ('development '! = 'Production ') {var map = options. _ componentNameMap ={};}// traverses the Component Array for (var I = 0, l = ids. length; I <l; I ++) {var key = ids [I]; if (commonTagRE. test (key) | reservedTagRE. test (key) {'development '! = 'Production '& warn ('Do not use built-in or reserved HTML elements as component' + 'id: '+ key); continue ;} // record a all lowercase <-> kebab-case mapping for // possible custom element case error warning if ('development '! = 'Production ') {map [key. replace (/-/g ,''). toLowerCase ()] = hyphenate (key);} def = components [key]; // if the component definition is a simple object-object literal volume, then you need to create the component function if (isPlainObject (def) {components [key] = Vue. extend (def );}}}}

When a Vue instance is created, after processing by the guardComponents () function, the components attribute of the Vue instance is{Component name: component function}In this way, you can directly use the components inside the instance to build functions to create component instances.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.