vue的生命周期鉤子函數(shù)怎么應用
本篇內容介紹了“vue的生命周期鉤子函數(shù)怎么應用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、網(wǎng)站改版維護、企業(yè)網(wǎng)站設計、硚口網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
在vue中，生命周期鉤子函數(shù)指的是當生命周期經(jīng)歷創(chuàng)建和更新DOM的過程中，會在其中運行的一些函數(shù)；在這些函數(shù)內部可以創(chuàng)建和聲明vue組件。
本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。
什么是vue的生命周期鉤子函數(shù)
每個 Vue 實例都經(jīng)過一系列初始化步驟。從創(chuàng)建時設置數(shù)據(jù)到編譯模板，將實例裝載到DOM，最后在數(shù)據(jù)更改期間更新 DOM。這個過程被稱為 Vue 實例的生命周期，在默認情況下，當它們經(jīng)歷創(chuàng)建和更新 DOM 的過程中，會在其中運行一些函數(shù)，在這些函數(shù)內部創(chuàng)建并聲明 Vue 組件，這些函數(shù)稱為生命周期鉤子。
Vue 有八種生命周期方法：
Before create
Created
Before mount
Mounted
Before update
Updated
Before destroy
Destroyed
本文將使用測試組件，它位于 src 文件夾內的 components 文件夾中。它應該看起來像這樣：
// src/components/Test.vueh4 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }
beforeCreate()
這是在 Vue.js 中調用的第一個生命周期鉤子，它在 Vue 實例初始化后立即被調用。
你可以在開發(fā)環(huán)境中運行程序來檢查界面。
npm run serve
注意，在加載組件之前，首先執(zhí)行的是在生命周期鉤子中寫入的 alert 語句。這正是函數(shù)在 Vue 引擎創(chuàng)建應用程序組件之前調用的表現(xiàn)。此時正處在 beforeCreate 階段，尚未設置計算屬性、觀察者、事件、數(shù)據(jù)屬性和操作等內容。
created()
正如你所猜測的那樣，這是在 beforeCreated 鉤子之后立即調用的第二個生命周期鉤子。在這個階段，Vue 實例已經(jīng)初始化，并且已經(jīng)激活了計算屬性、觀察者、事件、數(shù)據(jù)屬性和隨之而來的操作。
如果你運行該程序，你將會發(fā)現(xiàn)現(xiàn)在可以顯示數(shù)據(jù)類型。著在 beforeCreated 階段是不可能的，因為這時發(fā)生的激活還沒有發(fā)生。但是 Vue 實例在此階段尚未安裝，因此你無法在此處操作 DOM，元素屬性尚不可用。
beforeMount()
這是在 DOM 上掛載實例之前的那一刻，模板和作用域樣式都在這里編譯，但是你仍然無法操作DOM、元素屬性仍然不可用。
mounted()
這是在 beforeMounted 之后調用的下一個生命周期鉤子。在安裝實例后會立即調用它?，F(xiàn)在 app 組件或項目中的其他組件都可以使用了?，F(xiàn)在可以進行數(shù)據(jù)適合模板、DOM元素替換為數(shù)據(jù)填充元素之類的操作了，元素屬性現(xiàn)在也可以使用了。
這是使用 Vue CLI 創(chuàng)建的項目的默認位置，因為正如我們在開頭看到的那樣，已經(jīng)在 main.js 文件中完成了安裝。這就是你有可能無法使用其他掛鉤的原因，因為默認情況下已經(jīng)為你安裝了實例。
beforeUpdate()
在這里對需要更新 DOM 的數(shù)據(jù)進行更改。在進行刪除事件偵聽器之類的更改之前，此階段適合任何邏輯。
{{hello}}
最初在 DOM 上有一個歡迎注釋，但是在掛載階段（可以操作DOM的地方），數(shù)據(jù)會發(fā)生變化，因此beforeUpdate 的 alert 會在更改之前出現(xiàn)。
updated()
在對 DOM 更新之后立即調用此生命周期鉤子，它在調用 beforeUpdate 掛鉤之后執(zhí)行?？梢栽诖颂巿?zhí)行與 DOM 相關的操作，但不建議更改此鉤子內的狀態(tài)，因為 Vue 已經(jīng)專門為此提供了平臺。
{{hello}}
beforeDestroy()
調用此 Vue 生命周期鉤子的時機是在 Vue 實例被銷毀之前，實例和所有函數(shù)仍然完好無損并在此處工作。在這個階段你可以執(zhí)行資源管理、刪除變量和清理組件。
destroyed()
這是 Vue 生命周期的最后階段，其中所有的子 Vue 實例都已被銷毀，事件監(jiān)聽器和所有指令之類的東西在此階段已被解除綁定。在對象上運行 destroy 之后調用它。
當你運行程序并查看控制臺時，將看不到任何內容。
“vue的生命周期鉤子函數(shù)怎么應用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質量的實用文章！
分享名稱：vue的生命周期鉤子函數(shù)怎么應用
瀏覽地址：http://m.jiaotiyi.com/article/pecdoj.html