Vue如何實現(xiàn)組件的源碼解析

更新時間：2017年06月08日 16:10:44 作者：娜姐聊前端

本篇文章主要介紹了Vue如何實現(xiàn)組件的源碼解析，組件繼承分為兩大類，全局組件和局部組件，有興趣的可以了解一下

官網(wǎng)上關于組件繼承分為兩大類，全局組件和局部組件。無論哪種方式，最核心的是創(chuàng)建組件，然后根據(jù)場景不同注冊組件。

有一點要牢記，“Vue.js 組件其實都是被擴展的 Vue 實例”！

1. 全局組件

// 方式一
var MyComponent = Vue.extend({
  name: 'my-component',
  template: '<div>A custom component!</div>'
});
Vue.component('my-component', MyComponent);

// 方式二
Vue.component('my-component', {
  name: 'my-component',
  template: '<div>A custom component!</div>'
});

// 使用組件
<div id="example">
  <my-component></my-component>
</div>

主要涉及到兩個靜態(tài)方法：

Vue.extend：通過擴展Vue實例的方法創(chuàng)建組件
Vue.component：注冊組件

先來看看Vue.extend源碼，解釋參考中文注釋：

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;
 // 如果有name屬性，即組件名稱，檢測name拼寫是否合法
 if ('development' !== 'production') {
  if (!/^[a-zA-Z][\w-]*$/.test(name)) {
   warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.');
   name = null;
  }
 }
 // 創(chuàng)建一個VueComponent 構造函數(shù)，函數(shù)名為‘VueComponent'或者name
 var Sub = createClass(name || 'VueComponent');
 // 構造函數(shù)原型繼承Vue.prototype
 Sub.prototype = Object.create(Super.prototype);
 Sub.prototype.constructor = Sub;
 Sub.cid = cid++;
 // 合并Vue.options和extendOptions，作為新構造函數(shù)的靜態(tài)屬性options  
 Sub.options = mergeOptions(Super.options, extendOptions);
 //'super'靜態(tài)屬性指向Vue函數(shù)
 Sub['super'] = Super;
 // start-----------------拷貝Vue靜態(tài)方法  
 // 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-----------------拷貝Vue靜態(tài)方法  
 // enable recursive self-lookup
 if (name) {
  Sub.options.components[name] = Sub;
 }
 // cache constructor：緩存該構造函數(shù)
 if (isFirstExtend) {
  extendOptions._Ctor = Sub;
 }
 return Sub;
};

可以看到，Vue.extend的關鍵點在于：創(chuàng)建一個構造函數(shù)function VueComponent(options) { this._init(options) }，通過原型鏈繼承Vue原型上的屬性和方法，再講Vue的靜態(tài)函數(shù)賦值給該構造函數(shù)。

再看看Vue.component源碼，解釋參考中文注釋：

// _assetTypes: ['component', 'directive', 'elementDirective', 'filter', 'transition', 'partial']
config._assetTypes.forEach(function (type) {
 // 靜態(tài)方法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);
    }
   }
   // 如果第二個參數(shù)是簡單對象，則需要通過Vue.extend創(chuàng)建組件構造函數(shù)
   if (type === 'component' && isPlainObject(definition)) {
    if (!definition.name) {
     definition.name = id;
    }
    definition = Vue.extend(definition);
   }
   // 將組件函數(shù)加入Vue靜態(tài)屬性options.components中，也就是，全局注入該組件
   this.options[type + 's'][id] = definition;
   return definition;
  }
 };
});

方法Vue.component的關鍵點是，將組件函數(shù)注入到Vue靜態(tài)屬性中，這樣可以根據(jù)組件名稱找到對應的構造函數(shù)，從而創(chuàng)建組件實例。

2. 局部組件

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>'
    }
  }
});

注冊局部組件的特點就是在創(chuàng)建Vue實例的時候，定義components屬性，該屬性是一個簡單對象，key值為組件名稱，value可以是具體的組件函數(shù)，或者創(chuàng)建組件必須的options對象。

來看看Vue如何解析components屬性，解釋參考中文注釋：

Vue.prototype._init = function (options) {
  options = options || {};
  ....
  // merge options.
  options = this.$options = mergeOptions(this.constructor.options, options, this);
  ...
};

function mergeOptions(parent, child, vm) {
  //解析components屬性
  guardComponents(child);
  guardProps(child);
  ...
}

function guardComponents(options) {
  if (options.components) {
    // 將對象轉為數(shù)組
    var components = options.components = guardArrayAssets(options.components);
    //ids數(shù)組包含組件名
    var ids = Object.keys(components);
    var def;
    if ('development' !== 'production') {
      var map = options._componentNameMap = {};
    }
    // 遍歷組件數(shù)組
    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];
      // 如果是組件定義是簡單對象-對象字面量，那么需要根據(jù)該對象創(chuàng)建組件函數(shù)
      if (isPlainObject(def)) {
        components[key] = Vue.extend(def);
      }
    }
  }
}

在創(chuàng)建Vue實例過程中，經(jīng)過guardComponents()函數(shù)處理之后，能夠保證該Vue實例中的components屬性，都是由{組件名:組件函數(shù)}構成的，這樣在后續(xù)使用時，可以直接利用實例內部的組件構建函數(shù)創(chuàng)建組件實例。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: