VueJS學(xué)習(xí)之旅 06

上一節(jié)我們結(jié)合代碼和文檔佳遣,詳細介紹了Global Config姥份,下面我們詳細來看看Global API祠丝。


Global API

OK,結(jié)合官方文檔和代碼細節(jié)嘶伟,我們來看看這些 Global API 的具體用法:

  • Vue.set(object, key, value)

    文檔說明:

    • 參數(shù):
      • {Object} object
      • {string} key
      • {any} value
    • 返回值:設(shè)置的值(從代碼細節(jié)中看怎憋,這個描述不是很嚴謹)
    • 用法:
      設(shè)置對象的屬性。如果對象是響應(yīng)式的九昧,確保屬性被創(chuàng)建后也是響應(yīng)式的绊袋,同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制铸鹰。
      注意對象不能是 Vue 實例癌别,或者 Vue 實例的根數(shù)據(jù)對象。

    源碼定義在 'src/core/observer/index.js' 文件中蹋笼,基本邏輯為:

    1. 如果object是數(shù)組展姐,將value插入到key對應(yīng)的位置,直接返回value
    2. 如果object對象自身含有key屬性剖毯,將該屬性值更新為vlaue圾笨。然后返回
    3. 如果object是Vue實例對象,或者是Vue實例對象的根數(shù)據(jù)對象逊谋,給出警告信息(開發(fā)模式)然后直接返回擂达,不做處理
    4. 如果object沒有被追蹤(observed),則為object增加或修改key屬性胶滋,之后返回
    5. 如果不是以上情況谍婉,則為object增加響應(yīng)式屬性,并觸發(fā)視圖更新镀钓。返回value。(這部分涉及到Vue的響應(yīng)式設(shè)計原理镀迂,后續(xù)會深入研究)
  • Vue.delete(object, key)

    文檔說明:

    • 參數(shù):
      • {Object} object
      • {string} key
    • 用法:
      刪除對象的屬性丁溅。如果對象是響應(yīng)式的,確保刪除能觸發(fā)更新視圖探遵。這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制窟赏,但是你應(yīng)該很少會使用它。
      注意對象不能是 Vue 實例箱季,或者 Vue 實例的根數(shù)據(jù)對象

    源碼定義在 'src/core/observer/index.js' 文件中涯穷,基本邏輯為:

    1. 如果object是Vue實例對象,或者是Vue實例對象的根數(shù)據(jù)對象藏雏,給出警告信息(開發(fā)模式)然后直接返回拷况,不做處理
    2. 如果object對象自身沒有key屬性,直接返回不做處理
    3. 如果不是以上情況,直接刪除object的key屬性赚瘦。如果object沒有被追蹤(observed)粟誓,則直接返回,否則觸發(fā)視圖更新起意。
  • Vue.nextTick([callback, context])

    文檔說明:

    • 參數(shù):
      • {Function} [callback]
      • {Object} [context]
    • 用法:
      在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)鹰服。在修改數(shù)據(jù)之后立即使用這個方法,獲取更新后的 DOM揽咕。
      這里涉及到Vue的異步更新隊列悲酷,后續(xù)會深入研究。

    源碼定義在 'src/core/util/env.js' 文件中亲善,使用閉包和立即執(zhí)行函數(shù)返回一個 queueNextTick 函數(shù)设易,從而實現(xiàn)了一個異步隊列機制。
    代碼看似復(fù)雜逗爹,其實本質(zhì)上就是以異步隊列的方式亡嫌,使用給定上下文context來執(zhí)行callback函數(shù)。

  • Vue.use(plugin)

    文檔說明:

    • 參數(shù):
      • {Object | Function} plugin
    • 用法:
      安裝 Vue.js 插件掘而。如果插件是一個對象挟冠,必須提供 install 方法。如果插件是一個函數(shù)袍睡,它會被作為 install 方法知染。install 方法將被作為 Vue 的參數(shù)調(diào)用。
      當 install 方法被同一個插件多次調(diào)用斑胜,插件將只會被安裝一次控淡。

    源碼定義在 'src/core/global-api/use.js' 文件中,基本邏輯為:

    1. 如果plugin已經(jīng)安裝(通過plugin的installed屬性)止潘,則直接返回掺炭,不做處理
    2. 如果plugin.install是一個函數(shù),則執(zhí)行plugin.install(傳入的plugin為對象)凭戴。否則直接執(zhí)行plugin(傳入的plugin為函數(shù))涧狮。
    3. 將plugin的installed屬性設(shè)置為true
  • Vue.mixin(mixin)

    文檔說明:

    • 參數(shù):
      • {Object} mixin
    • 用法:
      全局注冊一個混合,影響注冊之后所有創(chuàng)建的每個 Vue 實例么夫。插件作者可以使用混合者冤,向組件注入自定義的行為。
      不推薦在應(yīng)用代碼中使用档痪。

    源碼定義在 'src/core/global-api/mixin.js' 文件中涉枫,代碼非常簡短,就是要向Vue.options合并其他選項腐螟。
    具體是通過調(diào)用 mergeOptions 函數(shù)實現(xiàn)的愿汰,有關(guān)的信息曾經(jīng)在 Global ConfigVue.config.optionMergeStrategies 部分介紹過困后。

  • Vue.extend(options)

    文檔說明:

    • 參數(shù):
      • {Object} options
    • 用法:
      使用基礎(chǔ) Vue 構(gòu)造器,創(chuàng)建一個“子類”尼桶。參數(shù)是一個包含組件選項的對象操灿。
      data 選項是特例,需要注意 - 在 Vue.extend() 中它必須是函數(shù)泵督。(關(guān)于為何data必須是函數(shù)趾盐,可以在Vue預(yù)定義的屬性合并策路中找到。 'src/core/util/options.js' 文件中 'strats.data' 的定義小腊。其它有關(guān)屬性合并策略的信息救鲤,請參考 Global ConfigVue.config.optionMergeStrategies 部分)

    源碼定義在 'src/core/global-api/extend.js' 文件中,基本邏輯為:

    1. 處理cid相關(guān)
    2. 判斷options中的name秩冈,只可包含數(shù)字本缠,字母和連接符-
    3. 定義Super指向Vue構(gòu)造器,使用構(gòu)造器模式和原型繼承模式構(gòu)建一個Sub繼承Super入问。
    4. 調(diào)用 mergeOptions 函數(shù)合并屬性丹锹,并賦值給Sub。
    5. 將Super的全局函數(shù)(use芬失,mixin楣黍,extend,component棱烂,directive租漂,filter等)賦值給Sub。
    6. 在Sub中記錄Super信息:Sub['super']= Super; Sub['superOptions'] = Super.options;颊糜。
  • Vue.component(id, [definition])

    文檔說明:

    • 參數(shù):
      • {string} id
      • {Function | Object} [definition]
    • 用法:
      注冊或獲取全局組件哩治。注冊還會自動使用給定的id設(shè)置組件的名稱。

    源碼定義在 'src/core/global-api/assets.js' 文件中衬鱼,基本邏輯為:

    1. 如果沒有給定definition业筏,執(zhí)行讀取操作。返回Vue.components[id]鸟赫。
    2. 否則蒜胖,判斷給定id的值是否為保留字,是保留字的話惯疙,給出警告信息(開發(fā)模式下)。
    3. 如果在definition中沒有給定name屬性妖啥,則使用id作為name屬性的值
    4. 默認調(diào)用Vue.extend霉颠,將definition包裝為Vue組件,然后將該組件注冊到Vue全局
    5. 返回包裝過后的definition
  • Vue.directive(id, [definition])

    文檔說明:

    • 參數(shù):
      • {string} id
      • {Function | Object} [definition]
    • 用法:
      注冊或獲取全局指令荆虱。

    源碼定義在 'src/core/global-api/assets.js' 文件中蒿偎,基本邏輯為:

    1. 如果沒有給定definition朽们,執(zhí)行讀取操作。返回Vue.directives[id]诉位。
    2. 如果definition是一個函數(shù)骑脱,將definition包裝為一個指令對象
    3. 然后將該指令注冊到Vue全局,并返回包裝過后的指令對象
  • Vue.filter(id, [definition])

    文檔說明:

    • 參數(shù):
      • {string} id
      • {Function} [definition]
    • 用法:
      注冊或獲取全局過濾器苍糠。

    源碼定義在 'src/core/global-api/assets.js' 文件中叁丧,基本邏輯為:

    1. 如果沒有給定definition,執(zhí)行讀取操作岳瞭。返回Vue.filters[id]拥娄。
    2. definition為一個函數(shù),這里稱為過濾器瞳筏。將該過濾器注冊到Vue全局稚瘾,并返回該過濾器
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市姚炕,隨后出現(xiàn)的幾起案子摊欠,更是在濱河造成了極大的恐慌,老刑警劉巖柱宦,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件些椒,死亡現(xiàn)場離奇詭異,居然都是意外死亡捷沸,警方通過查閱死者的電腦和手機摊沉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來痒给,“玉大人说墨,你說我怎么就攤上這事〔园兀” “怎么了尼斧?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長试吁。 經(jīng)常有香客問我棺棵,道長,這世上最難降的妖魔是什么熄捍? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任烛恤,我火速辦了婚禮,結(jié)果婚禮上余耽,老公的妹妹穿的比我還像新娘缚柏。我一直安慰自己,他們只是感情好碟贾,可當我...
    茶點故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布币喧。 她就那樣靜靜地躺著轨域,像睡著了一般。 火紅的嫁衣襯著肌膚如雪杀餐。 梳的紋絲不亂的頭發(fā)上干发,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機與錄音史翘,去河邊找鬼枉长。 笑死,一個胖子當著我的面吹牛恶座,可吹牛的內(nèi)容都是我干的搀暑。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼跨琳,長吁一口氣:“原來是場噩夢啊……” “哼自点!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起脉让,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤桂敛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后溅潜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體术唬,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年滚澜,在試婚紗的時候發(fā)現(xiàn)自己被綠了粗仓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡设捐,死狀恐怖借浊,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情萝招,我是刑警寧澤蚂斤,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站槐沼,受9級特大地震影響曙蒸,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜岗钩,卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一纽窟、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧兼吓,春花似錦臂港、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至凶朗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背棕硫。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工戚啥, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人宛畦。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓瘸洛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親次和。 傳聞我的和親對象是個殘疾皇子反肋,可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2 354

推薦閱讀更多精彩內(nèi)容