Vue initAssetRegisters()创建组件、指令、过滤器源码

// 注册Vue.directive 、 vue.component() 、 Vue.filter()
initAssetRegisters(Vue)

/* @flow */

import {
      ASSET_TYPES } from 'shared/constants'
import {
      isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters (Vue: GlobalAPI) {
     
  /**
   * Create asset registration methods.
   */
   // 遍历 ASSET_TYPES 数组,为Vue 定义相应的方法
   // ASSET_TYPES 包含 directive  component  filter
  ASSET_TYPES.forEach(type => {
     
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
     
      if (!definition) {
      // 判断是否有第二个参数,没有的话去之前的option的组件或者指令
        return this.options[type + 's'][id]
      } else {
     
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
     
          validateComponentName(id)
        }
        // Vue.component("test",{template:""})
        // 判断传入的是不是一个原始对象
        if (type === 'component' && isPlainObject(definition)) {
     
          definition.name = definition.name || id
          // 把组件配置转换为组件的构造函数
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
     
          definition = {
      bind: definition, update: definition }
        }
        // 全局注册,存储资源赋值
        // this.options
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}

你可能感兴趣的:(vue,vue源码分析,vue响应式原理,vue)