讀vue源碼(1)

gobal-api/index.jsvue

initMixin(Vue) 對Vue.mixin方法進行定義,參數爲要混入到Vue.options對象的對象。api

Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
  }

gobal-api/use.js
這段源碼簡單,global-api/use.js中,this._installedPlugins儲存插件的數組。數組

export function initUse (Vue: GlobalAPI) {
  Vue.use = function (plugin: Function | Object) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
   // 已經執行過了插件暴露的方法就不須要執行了
    if (installedPlugins.indexOf(plugin) > -1) {
      return this
    }
    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    // 第一個參數是vue自己了
    if (typeof plugin.install === 'function') {
    // 插件要實現install函數,或者自己就是函數,
      plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
      plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
  }
mergeOptions是utils/options.js
export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    //覈實子對象中components的名字合法
    checkComponents(child)
  }

  if (typeof child === 'function') {
    child = child.options
  }
  // 對options中的props、inject、 directive格式化對象
  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)
  // extends、mixins 格式化變成對象
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  const options = {}
  // 對 vm.constructor的成員和目前options成員的key進行自定義化處理,通常不會自定義化處理的。
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}
相關文章
相關標籤/搜索