你不知道的vue生命週期鉤子選項 三

2022-04-03 03:42:23 字數 2862 閱讀 2103

生命週期鉤子選項的合併策略

function mergehook (

parentval: ?array,

childval: ?function | ?array): ?array

lifecycle_hooks.foreach(hook => )

這是用來合併生命週期鉤子的,先看看foreach語句:

使用foreach遍歷lifecycle_hooks常量,那說明這個常量應該是乙個陣列, 我們再來看看 

lifecycle_hooks常量是什麼
export const lifecycle_hooks = [

'beforecreate',

'created',

'beforemount',

'mounted',

'beforeupdate',

'updated',

'beforedestroy',

'destroyed',

'activated',

'deactivated',

'errorcaptured'

]

lifecycle_hooks常量實際上是由與生命週期鉤子同名的字串組成的陣列

foreach語句,它的作用就是在strats策略物件上新增用來合併各個生命週期鉤子選項的策略函式,並且這些生命週期鉤子選項的策略函式相同:都是mergehook函式

return childval

? parentval

? parentval.concat(childval)

: array.isarray(childval)

? childval

: [childval]

: parentval

mergehook函式內部處理操作,整體上是由三元運算子構成

return (是否有 childval,即判斷元件的選項中是否有對應名字的生命週期鉤子函式)

? 如果有 childval 則判斷是否有 parentval

? 如果有 parentval 則使用 concat 方法將二者合併為乙個陣列

: 如果沒有 parentval 則判斷 childval 是不是乙個陣列

? 如果 childval 是乙個陣列則直接返回

: 否則將其作為陣列的元素,然後返回陣列

: 如果沒有 childval 則直接返回 parentval

也就是說判斷子選項和父選項是否有,然後進行對應的處理, 

如果子選項和父選項都有 則合併成為乙個陣列 等。。。。

它判斷是否有childval,即元件的選項是否寫了生命週期鉤子函式,如果沒有則直接返回了parentval

如果有parentval那麼其一定是陣列,如果沒有parentval那麼strats[hooks]函式根本不會執行

接下來看看幾種例項:更加明確的學習生命週期選項策略:

new vue(

})

strats.created策略函式來講 ,created就是childval,它是乙個函式。parentval應該是vue.options.created,但vue.options.created是不存在的,所以最終經過strats.created函式的處理將返回乙個陣列:

options.created = [

function ()

]

const parent = vue.extend(

})const child = new parent(

})

child 是通過new parent生成的 child 就是childval, parent 就是parentval

childval:

created: function ()

parentval:(parent.options.created)

parent.options.created = [

created: function ()

]

這個例子有childval,又有parentval,根據mergehooks函式:

parentval.concat(childval),將parentvalchildval合併成乙個陣列

created: function () ,

created: function ()

]

array.isarray(childval)]?

這一段三元運算代表什麼?

說明vue 生命週期鉤子是可以寫成陣列的,是不是很驚訝 很神奇,從未有過的姿勢,如此的爽!

new vue(,

function () ,

function ()

]})

vue原始碼讀起來真雞兒爽!!!

幾天沒更了 加班到腦殼痛。。。

你可能不知道的vue父子元件生命週期

關於vue元件的生命週期,相比各位同學都已經滾瓜爛熟。但是父子元件的生命週期呢?例如我是父親 export default data methods beforecreate created beforemount mounted 子元件 我是子元件 嘿嘿,如果沒有仔細了解過,還真不知道吧 答案 通...

vue生命週期鉤子

el 表示dom元素,data 表示資料 deforecreated el和data並未初始化 created 完成了data資料的初始化,el沒有 beforemount 完成了el和data初始化 mounted 完成掛載 el和data都初始化完成,並且掛載在頁面上了 注意 以下勾子只能在 k...

Vue 生命週期鉤子

從vue例項建立,執行,到銷毀期間,總是伴隨著各種各樣的事件,這些事件,稱為生命週期。建立 beforecreate 例項剛剛在記憶體中被建立出來,但data和methods還沒有進行初始化。created 例項已經在記憶體中建立,data和methods還沒有建立 beforemount 完成模板...