資訊專欄INFORMATION COLUMN
摘要：官網(wǎng)生命周期圖個(gè)人理解實(shí)例組件剛創(chuàng)建好，配置數(shù)據(jù)觀測(cè)之前的階段。數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬重新渲染和打補(bǔ)丁之前，該階段不會(huì)觸發(fā)附加的重渲染過(guò)程，該鉤子在服務(wù)器端渲染期間也不會(huì)被調(diào)用。
vue官網(wǎng)生命周期圖 個(gè)人理解
beforeCreate
實(shí)例組件剛創(chuàng)建好，配置數(shù)據(jù)觀測(cè)（observe data）之前的階段。el和data還未初始化。
在此階段，一般處理loading事件之類的事情。
created
實(shí)例創(chuàng)建完成，完成屬性綁定，這個(gè)階段DOM并沒有生成，$el屬性不存在。el未初始化，data初始化。
此階段，異步數(shù)據(jù)的請(qǐng)求操作宜在此調(diào)用，實(shí)現(xiàn)結(jié)束loading，做一些初始化處理，實(shí)現(xiàn)一些函數(shù)的自執(zhí)行。
beforeMounted
模板編譯之前的階段。el和data完成初始化，computed計(jì)算屬性中，只更改一次的屬性會(huì)在此階段加載。
mounted
完成模板編譯之后的階段。頁(yè)面的vue指令編譯成html代碼，例如：
{{message}}
會(huì)編譯成compile completed!
。beforeUpdated
數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補(bǔ)丁之前，該階段不會(huì)觸發(fā)附加的重渲染過(guò)程，該鉤子在服務(wù)器端渲染期間也不會(huì)被調(diào)用。
updated
由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。
當(dāng)這個(gè)鉤子被調(diào)用時(shí)，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
一般在此鉤子出做統(tǒng)一數(shù)據(jù)更新操作，如果需要區(qū)分不同數(shù)據(jù)的更新，同時(shí)操作DOM，可以使用nextTick函數(shù)。
activated
keep-alive 組件激活時(shí)調(diào)用。
deactivated
keep-alive 組件停用時(shí)調(diào)用。
beforeDestroy
實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。
destroy
Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83690.html
摘要：和下面手動(dòng)調(diào)用在控制臺(tái)中輸入在這個(gè)階段會(huì)銷毀實(shí)例，生命周期結(jié)束。外部實(shí)例中的函數(shù)顯示的效果參考鏈接組件的生命周期詳解生命周期 為什么要認(rèn)識(shí)Vue的生命周期 Vue的生命周期是一個(gè)非常重要的點(diǎn)，如果不懂Vue的生命周期，那么很多時(shí)候，就不知道Vue的實(shí)際渲染時(shí)機(jī)，程序中會(huì)出現(xiàn)各種bug。 因此，學(xué)習(xí)Vue的生命周期是非常用必要的。 showImg(https://segmentfault...
摘要：注意看下此時(shí)還是沒有選項(xiàng)鉤子函數(shù)和間的生命周期在這一階段發(fā)生的事情還是比較多的。鉤子函數(shù)和鉤子函數(shù)間的生命周期當(dāng)發(fā)現(xiàn)中的數(shù)據(jù)發(fā)生了改變，會(huì)觸發(fā)對(duì)應(yīng)組件的重新渲染，先后調(diào)用和鉤子函數(shù)。 首先，每個(gè)Vue實(shí)例在被創(chuàng)建之前都要經(jīng)過(guò)一系列的初始化過(guò)程,這個(gè)過(guò)程就是vue的生命周期。首先看一張圖吧~這是官方文檔上的圖片相信大家一定都會(huì)很熟悉： showImg(https://segmentfau...
摘要：實(shí)例在文檔中經(jīng)常會(huì)使用這個(gè)變量名表示實(shí)例，在實(shí)例化時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)模板掛載元素方法生命周期鉤子等選項(xiàng)。通俗說(shuō)就是實(shí)例從創(chuàng)建到銷毀的過(guò)程，就是生命周期。 Vue 實(shí)例中的生命周期鉤子 Vue 框架的入口就是 Vue 實(shí)例，其實(shí)就是框架中的 view model ，它包含頁(yè)面中的業(yè)務(wù)處理邏輯、數(shù)據(jù)模型等，它的生命周期中有多個(gè)事件鉤子，讓我們?cè)诳刂普麄€(gè)Vue實(shí)例的過(guò)程...
摘要：前言用也有一段時(shí)間了發(fā)現(xiàn)生命周期是很重要的一部分稍微懂得了一些東西特地來(lái)分享一下生命周期和鉤子函數(shù)介紹啥也不說(shuō)先上圖圖為生命周期圖圖為生命周期圖圖為和鉤子函數(shù)比較重點(diǎn)看生命周期和鉤子函數(shù)具體上代碼自己粘走執(zhí)行創(chuàng)建前狀態(tài)創(chuàng)建完畢狀態(tài) 前言 用Vue也有一段時(shí)間了,發(fā)現(xiàn)生命周期是很重要的一部分,稍微懂得了一些東西,特地來(lái)分享一下. 生命周期和鉤子函數(shù)-介紹 啥也不說(shuō)先上圖圖-1為 Vue...
閱讀 1519·2021-09-02 13:57
閱讀 1928·2019-08-30 15:55
閱讀 2519·2019-08-30 15:54
閱讀 2339·2019-08-30 15:44
閱讀 2794·2019-08-30 13:18
閱讀 539·2019-08-30 13:02
閱讀 866·2019-08-29 18:46
閱讀 1716·2019-08-29 11:25
