Vue 選項(xiàng)合并規(guī)則

  • data、provide 等選項(xiàng)使用 mergeDataOrFn
  • 生命周期鉤子watch 合并為 數(shù)組,使得父子選項(xiàng)中的鉤子函數(shù)都能夠被執(zhí)行
  • directives、filterscomponents 等資源選項(xiàng),父子選項(xiàng)將以原型鏈的形式被處理,這樣才能夠在任何地方都是用內(nèi)置組件、指令等
  • props、methods、injectcomputed 等選項(xiàng),父選項(xiàng)始終可用,但是子選項(xiàng)會(huì)覆蓋同名的父選項(xiàng)字段
  • 以上沒有提到的選項(xiàng)都使用默認(rèn) defaultStrat,該選項(xiàng)策略是:只要子選項(xiàng)不是 undefined 就是用子選項(xiàng),否則使用父選項(xiàng)

附上 mergeDataOrFn 的實(shí)現(xiàn):

export function mergeDataOrFn (
  parentVal: any,
  childVal: any,
  vm?: Component
): ?Function {
  if (!vm) {
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // we need to return a function that returns the
    // merged result of both functions... no need to
    // check if parentVal is a function here because
    // it has to be a function to pass previous merges.
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {
    return function mergedInstanceDataFn () {
      // instance merge
      const instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal
      const defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,168評(píng)論 0 29
  • vue概述 在官方文檔中,有一句話對(duì)Vue的定位說的很明確:Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,593評(píng)論 0 25
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 簡單小巧、漸進(jìn)式、功能強(qiáng)大的技術(shù)棧 1.1.2 為什么學(xué)習(xí)...
    蔡華鵬閱讀 3,493評(píng)論 0 3
  • 落地生根 《丁乙和他爹》【上】(共上中下) 丁乙其實(shí)不姓丁,也不叫丁乙,他爹姓爨,名字叫爨生存...
    馮俊龍閱讀 365評(píng)論 0 4
  • 很多時(shí)候在想,痛苦究竟要怎樣定義才算。很久沒感知過痛苦,最近卻愈加深刻,無法紓解。越來越深刻的追憶大學(xué)生活,有一段...
    莉莉非利亞閱讀 171評(píng)論 1 0

友情鏈接更多精彩內(nèi)容