首頁 web前端 前端問答 vue3的生命週期有哪些

vue3的生命週期有哪些

Feb 01, 2024 pm 04:33 PM
vue3 生命週期

vue3的生命週期:1、beforeCreate;2、created;3、beforeMount;4、mounted;5、beforeUpdate;6、updated;7、beforeDestroy;8、destroyed;9、activated;10、deactivated ;11、errorCaptured;12、getDerivedStateFromProps等。

vue3的生命週期有哪些

Vue 3 引入了新的生命週期鉤子函數,並對一些舊的鉤子函數進行了重構或刪除。以下是一些Vue 3 的生命週期鉤子函數:

1、beforeCreate:在實例建立之前調用,此時還沒有掛載,資料觀測(data observer) 和事件尚未初始化。

2、created:實例建立完成後調用,此時已經完成了資料觀測 (data observer) 和事件初始化,但尚未掛載 DOM。

3、beforeMount:在掛載之前調用,相關的 render 函數首次被調用。可以在此時對模板進行編譯和渲染。

4、mounted:實例已經掛載到 DOM 上後呼叫。在這個時候,所有的 el 和 ref 都已經被解析,並且 $refs 已經被填滿。

5、beforeUpdate:資料更新時調用,發生在虛擬 DOM 打補丁之前。可以在此時進行狀態更新或手動變更 DOM。

6、updated:資料更新完成後調用,發生在虛擬 DOM 打補丁和 DOM 更新之後。

7、beforeDestroy:實例銷毀之前呼叫。在這個階段,實例仍然完全可用。

8、destroyed:實例銷毀後呼叫。呼叫後,所有的事件監聽器和子元件都將被移除,所有的子元件的 destroyed 鉤子也會被呼叫。

9、activated:當被啟動的 keep-alive 元件重新進入時呼叫。

10、deactivated:當被啟動的 keep-alive 元件離開時呼叫。

11、errorCaptured:在擷取階段處理錯誤時呼叫。如果這個鉤子沒有回傳值,或回傳 false,那麼父元件的 errorCaptured 鉤子就會被繼續呼叫;否則,該錯誤不會被進一步處理。

12、getDerivedStateFromProps:在每次渲染之前都會調用,用於從 props 派生出狀態。這是一個靜態方法,可以在元件建立之前或在元件銷毀之後進行變更。

13、renderTracked 和 renderTriggered:這兩個鉤子是在渲染過程中觸發的,前者在追蹤渲染時觸發,後者在強制觸發渲染時觸發。

14、setup:在 Vue 3 中,元件選項 API 被 Composition API 取代。 setup 函數是 Composition API 的入口點,用於組織和重複使用元件邏輯。它是一個新的、更強大、更靈活的方式來定義元件選項。

以上就是 Vue 3 的生命週期鉤子函數。需要注意的是,由於 Vue 3 對底層進行了大量最佳化,因此一些舊的鉤子函數(如 init、ready 等)已移除或合併到其他鉤子函數中。同時,Vue 3 也新增了一些用於最佳化效能和錯誤處理的鉤子函數,如 activated、deactivated、errorCaptured 等。

以上是vue3的生命週期有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
威爾R.E.P.O.有交叉遊戲嗎?
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue3+vite:src使用require動態匯入圖片報錯怎麼解決 vue3+vite:src使用require動態匯入圖片報錯怎麼解決 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require動態導入圖片報錯和解決方法vue3+vite動態的導入多張圖片vue3如果使用的是typescript開發,就會出現require引入圖片報錯,requireisnotdefined不能像使用vue2這樣imgUrl:require(' …/assets/test.png')導入,是因為typescript不支援require所以用import導入,下面介紹如何解決:使用awaitimport

Vue3如何實作刷新頁面局部內容 Vue3如何實作刷新頁面局部內容 May 26, 2023 pm 05:31 PM

想要實現頁面的局部刷新,我們只需要實現局部元件(dom)的重新渲染。在Vue中,想要實現這效果最簡單的方式方法就是使用v-if指令。在Vue2中我們除了使用v-if指令讓局部dom的重新渲染,也可以新建一個空白元件,需要刷新局部頁面時跳轉至這個空白元件頁面,然後在空白元件內的beforeRouteEnter守衛中又跳轉回原來的頁面。如下圖所示,如何在Vue3.X中實現點擊刷新按鈕實現紅框範圍內的dom重新加載,並展示對應的加載狀態。由於Vue3.X中scriptsetup語法中組件內守衛只有o

Vue3怎麼解析markdown並實現程式碼高亮顯示 Vue3怎麼解析markdown並實現程式碼高亮顯示 May 20, 2023 pm 04:16 PM

Vue實作部落格前端,需要實作markdown的解析,如果有程式碼則需要實作程式碼的高亮。 Vue的markdown解析函式庫很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。這些庫都大同小異。這裡選用的是marked,程式碼高亮的函式庫選用的是highlight.js。具體實現步驟如下:一、安裝依賴庫在vue專案下開啟命令窗口,並輸入以下命令npminstallmarked-save//marked用於將markdown轉換成htmlnpmins

如何處理 C++ 函數指標的析構與生命週期管理? 如何處理 C++ 函數指標的析構與生命週期管理? Apr 17, 2024 pm 05:48 PM

在C++中,函數指標需要適當的析構和生命週期管理。可以透過以下方式實現:手動析構函數指針,釋放記憶體。使用智慧指針,如std::unique_ptr或std::shared_ptr,自動管理函數指標的生命週期。將函數指標綁定到對象,對像生命週期管理函數指標的析構。在GUI程式設計中,使用智慧指標或綁定到物件可確保回呼函數在適當的時候被析構,避免記憶體洩漏和不一致。

Vue3中怎麼實現選取頭像並裁剪 Vue3中怎麼實現選取頭像並裁剪 May 29, 2023 am 10:22 AM

最終效果安裝VueCropper組件yarnaddvue-cropper@next上面的安裝值針對Vue3的,如果時Vue2或想使用其他的方式引用,請訪問它的npm官方地址:官方教程。在元件中引用使用時也很簡單,只需要引入對應的元件和它的樣式文件,我這裡沒有在全域引用,只在我的元件檔案中引入import{userInfoByRequest}from'../js/api' import{VueCropper}from'vue-cropper&

怎麼使用vue3+ts+axios+pinia實現無感刷新 怎麼使用vue3+ts+axios+pinia實現無感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia實作無感刷新1.先在專案中下載aiXos和pinianpmipinia--savenpminstallaxios--save2.封裝axios請求-----下載js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfigig ,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Vue3復用元件怎麼使用 Vue3復用元件怎麼使用 May 20, 2023 pm 07:25 PM

前言無論是vue還是react,當我們遇到多處重複程式碼的時候,我們都會想著如何重複使用這些程式碼,而不是一個檔案裡充斥著一堆冗餘程式碼。實際上,vue和react都可以透過抽組件的方式來達到復用,但如果遇到一些很小的程式碼片段,你又不想抽到另外一個檔案的情況下,相比而言,react可以在相同文件裡面宣告對應的小元件,或透過renderfunction來實現,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Vue3中如何使用defineCustomElement定義元件 Vue3中如何使用defineCustomElement定義元件 May 28, 2023 am 11:29 AM

使用Vue建構自訂元素WebComponents是一組web原生API的統稱,允許開發者建立可重複使用的自訂元素(customelements)。自訂元素的主要好處是,它們可以在使用任何框架,甚至在不使用框架的場景下使用。當你面向的最終用戶可能使用了不同的前端技術棧,或者當你希望將最終的應用與它使用的組件實現細節解耦時,它們會是理想的選擇。 Vue和WebComponents是互補的技術,Vue為使用和創建自訂元素提供了出色的支援。你可以將自訂元素整合到現有的Vue應用中,或使用Vue來構

See all articles