vue的生命周期和鉤子函數(shù)

生命周期

beforeCreate
在實例初始化之后僵蛛,數(shù)據(jù)觀測 (data observer) 和 event/watcher 事件配置之前被調(diào)用。

created
在實例創(chuàng)建完成后被立即調(diào)用迎变。在這一步充尉,實例已完成以下的配置:數(shù)據(jù)觀測 (data observer),屬性和方法的運算衣形,watch/event 事件回調(diào)驼侠。然而,掛載階段還沒開始谆吴,$el 屬性目前不可見倒源。

beforemount
在掛載開始之前被調(diào)用:相關(guān)的 render 函數(shù)首次被調(diào)用。

mounted
el 被新創(chuàng)建的 vm.$el 替換句狼,并掛載到實例上去之后調(diào)用該鉤子笋熬。如果 root 實例掛載了一個文檔內(nèi)元素,當(dāng) mounted 被調(diào)用時 vm.$el 也在文檔內(nèi)腻菇。

beforeUpdate
數(shù)據(jù)更新時調(diào)用胳螟,發(fā)生在虛擬 DOM 打補(bǔ)丁之前。這里適合在更新之前訪問現(xiàn)有的 DOM筹吐,比如手動移除已添加的事件監(jiān)聽器旺隙。

updated
當(dāng)這個鉤子被調(diào)用時,組件 DOM 已經(jīng)更新骏令,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作蔬捷。然而在大多數(shù)情況下,你應(yīng)該避免在此期間更改狀態(tài)榔袋。如果要相應(yīng)狀態(tài)改變周拐,通常最好使用計算屬性或 watcher 取而代之。

beforeDestroy
實例銷毀之前調(diào)用凰兑。在這一步妥粟,實例仍然完全可用。

destroyed
Vue 實例銷毀后調(diào)用吏够。調(diào)用后勾给,Vue 實例指示的所有東西都會解綁定滩报,所有的事件監(jiān)聽器會被移除,所有的子實例也會被銷毀播急。

自定義指令

當(dāng)頁面加載時脓钾,該元素將獲得焦點 (注意:autofocus 在移動版 Safari 上不工作)。事實上桩警,只要你在打開這個頁面后還沒點擊過任何內(nèi)容可训,這個輸入框就應(yīng)當(dāng)還是處于聚焦?fàn)顟B(tài)。現(xiàn)在讓我們用指令來實現(xiàn)這個功能:

// 注冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

在組件中使用:

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

后你可以在模板中任何元素上使用新的 v-focus 屬性

<input v-focus>

鉤子函數(shù)

一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選):
bind:只調(diào)用一次捶枢,指令第一次綁定到元素時調(diào)用握截。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted:被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在烂叔,但不一定已被插入文檔中)谨胞。

componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

指令鉤子函數(shù)的參數(shù)有這些:

el:指令所綁定的元素蒜鸡,可以用來直接操作 DOM 胯努。
binding:一個對象,包含以下屬性:
name:指令名术瓮,不包括 v- 前綴。
value:指令的綁定值贰健,例如:v-my-directive="1 + 1" 中胞四,綁定值為 2。
oldValue:指令綁定的前一個值伶椿,僅在 update 和 componentUpdated 鉤子中可用辜伟。無論值是否改變都可用。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末脊另,一起剝皮案震驚了整個濱河市导狡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌偎痛,老刑警劉巖旱捧,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異踩麦,居然都是意外死亡枚赡,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門谓谦,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贫橙,“玉大人,你說我怎么就攤上這事反粥÷啵” “怎么了疲迂?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長莫湘。 經(jīng)常有香客問我尤蒿,道長,這世上最難降的妖魔是什么逊脯? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任优质,我火速辦了婚禮,結(jié)果婚禮上军洼,老公的妹妹穿的比我還像新娘巩螃。我一直安慰自己,他們只是感情好匕争,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布避乏。 她就那樣靜靜地躺著,像睡著了一般甘桑。 火紅的嫁衣襯著肌膚如雪拍皮。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天跑杭,我揣著相機(jī)與錄音铆帽,去河邊找鬼。 笑死德谅,一個胖子當(dāng)著我的面吹牛爹橱,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播窄做,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼愧驱,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了椭盏?” 一聲冷哼從身側(cè)響起组砚,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎掏颊,沒想到半個月后糟红,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡乌叶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年改化,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片枉昏。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡陈肛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出兄裂,到底是詐尸還是另有隱情句旱,我是刑警寧澤隘马,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布恃泪,位于F島的核電站序目,受9級特大地震影響碎税,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜啃匿,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一蛔外、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧溯乒,春花似錦夹厌、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至光稼,卻和暖如春或南,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背艾君。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工采够, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人冰垄。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓蹬癌,卻偏偏與公主長得像,于是被迫代替她去往敵國和親播演。 傳聞我的和親對象是個殘疾皇子冀瓦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

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