Vue.js1.x和2.x生命周期的示例分析

這篇文章給大家分享的是有關(guān)Vue.js1.x和2.x生命周期的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

在Vue.js中，在實(shí)例化Vue之前，它們都是以HTML的文本形式存在文本編輯器中。當(dāng)實(shí)例化后將經(jīng)歷創(chuàng)建、編譯、銷毀三個(gè)主要階段。

以下是Vue.js 1.x 實(shí)例的生命周期圖示：

Vue.js 1.x 的生命周期鉤子

1. init

在實(shí)例開始初始化時(shí)同步調(diào)用。此時(shí)數(shù)據(jù)觀測(cè)、事件和Watcher都尚未初始化。

2. created

在實(shí)例化創(chuàng)建之后同步調(diào)用。此時(shí)實(shí)例已經(jīng)結(jié)束解析選項(xiàng)，已建立：數(shù)據(jù)綁定、計(jì)算屬性、方法、Watcher/事件回調(diào),但是還沒有開始DOM編譯，$el還不存在。

3. beforeCompile

在編譯開始前調(diào)用。

4. compiled

在編譯結(jié)束后調(diào)用。此時(shí)所以指令已經(jīng)生效，因而數(shù)據(jù)的變化將觸發(fā)DOM更新，但是不保證$el已插入文檔。

5. ready

在編譯結(jié)束和$el第一次插入文檔后調(diào)用，如在第一次attached鉤子之后調(diào)用。

6. attached

vm.$el 插入 DOM 時(shí)調(diào)用。

7. detached

在 vm.$el 從 DOM 中刪除時(shí)調(diào)用。必須是由指令或?qū)嵗椒▌h除，直接操作 vm.$el 不會(huì)觸發(fā)。

8. beforeDestroy

在開始銷毀實(shí)例時(shí)調(diào)用，此時(shí)實(shí)例仍然有功能。

9. destroyed

在實(shí)例被銷毀之后調(diào)用，此時(shí)所有的綁定和實(shí)例的指令已經(jīng)解綁，所有子實(shí)例已經(jīng)被銷毀。

以下是Vue.js 2.x 實(shí)例的生命周期圖示：

Vue.js 2.x 的生命周期鉤子

1. 廢棄ready，新增mounted

在1.x版本中，ready鉤子函數(shù)的調(diào)用時(shí)機(jī)是第一次插入DOM后，但是2.0不一定只執(zhí)行在瀏覽器中，也可能在服務(wù)端渲染，所以廢棄ready并新增mounted鉤子函數(shù)，mounted鉤子函數(shù)調(diào)用時(shí)機(jī)在DOM樹生成之后。

2. 廢棄beforeCompile

在1.x版本中，調(diào)用beforeCompile鉤子函數(shù)是在模板編譯前，2.0版本中廢棄并用created代替。

3. 廢棄compiled

在1.x版本中，調(diào)用compiled是在編譯模板之后、DOM創(chuàng)建之前，2.0版本中廢棄并用mounted代替。

4. 廢棄attached

在1.x版本中，調(diào)用attached是在插入DOM時(shí)，2.0版本中不一定會(huì)創(chuàng)建真實(shí)的DOM，2.0版本廢棄。

5. 廢棄detached

在1.x版本中，調(diào)用detached是移除DOM時(shí)，2.0版本中不一定會(huì)創(chuàng)建真實(shí)的DOM，2.0版本廢棄。

6. 新增beforeCreate

2.0版本中新增beforeCreate,在實(shí)例初始化之后，數(shù)據(jù)觀察(data observer)和event/watcher事件配置之前被調(diào)用。

7. 新增beforeMount

2.0版本中新增beforeMount，是在Watcher之前、模板編譯成render方法之后調(diào)用，相關(guān)render首次被調(diào)用。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。

8. 新增beforeUpdate

2.0版本中新增beforeUpdate,是在DOM樹生成之前、虛擬DOM樹生成之后調(diào)用，調(diào)用條件是這個(gè)vm實(shí)例已經(jīng)mounted過。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。

9. 新增updated

2.0版本中新增updated，在DOM樹生成之后調(diào)用，調(diào)用條件是這個(gè)vm實(shí)例已經(jīng)mounted過。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。

10. 新增activated

2.0版本中新增activated,在DOM樹生成之后，調(diào)用條件是keep-alive組件。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。

11. 新增deactivated

2.0版本中新增deactivated，在Vue實(shí)例銷毀時(shí)調(diào)用，調(diào)用條件是keep-alive組件。該鉤子函數(shù)在服務(wù)器渲染期間不被調(diào)用。

感謝各位的閱讀！關(guān)于“Vue.js1.x和2.x生命周期的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！