web前端之vue的生命周期、unmounted、onUnmounted、activated、deactivated、keep-alive

MENU

  • 前言
  • vue2
  • vue3
  • activated和deactivated


前言

在Vue.js中,組件生命周期鉤子函數定義了在組件的不同階段執行的操作。Vue 2.x和Vue 3.x之間的生命周期鉤子函數有一些區別。


vue2

1、beforeCreate: 在實例初始化之后,數據觀測(data observer)和event/watcher事件配置之前被調用。
2、created: 實例已經創建完成后調用,此階段完成了數據觀測(data observer)和event/watcher事件的配置。
3、beforeMount: 在掛載開始之前被調用:相關的render函數首次被調用。
4、mounted: el 被新創建的vm.$el替換,并掛載到實例上去之后調用該鉤子函數。
5、beforeUpdate: 數據更新時調用,發生在虛擬DOM重新渲染和打補丁之前。
6、updated: 由于數據更改導致的虛擬DOM重新渲染和打補丁后調用。
7、beforeDestroy: 在實例銷毀之前調用。實例仍然完全可用。
8、destroyed: 在實例銷毀之后調用。調用后,所有的事件監聽器和所有的子實例被銷毀。


vue3

01、beforeCreate: 在實例初始化之后,數據觀測(data observer)和event/watcher事件配置之前被調用。
02、created: 實例已經創建完成后調用,此階段完成了數據觀測(data observer)和event/watcher事件的配置。
03、beforeMount: 在掛載開始之前被調用:相關的render函數首次被調用。
04、onBeforeMount: 在掛載之前調用。
05、mounted: 在掛載完成之后調用,此時已經完成了頁面中的真實DOM渲染。
06、onMounted: 在掛載完成之后調用,與mounted類似。
07、beforeUpdate: 在數據變化更新DOM之前被調用。
08、onBeforeUpdate: 在更新之前調用。
09、updated: 在數據變化更新DOM之后被調用。
10、onUpdated: 在更新之后調用。
11、beforeUnmount: 在卸載組件之前調用。
12、onBeforeUnmount: 在卸載之前調用,與beforeUnmount類似。
13、unmounted: 在卸載組件之后調用。
14、onUnmounted: 在卸載之后調用,與unmounted類似。
Vue 3.x引入了一些新的生命周期鉤子函數,如onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount和onUnmounted。這些新的生命周期鉤子函數提供了更精細的控制和更明確的生命周期階段。


activated和deactivated

在Vue.js 2.x中針對的是keep-alive包裹的組件。activated在組件被keep-alive緩存激活時調用,而deactivated在組件被緩存停用時調用。這對于在組件被切換時執行一些特定的操作非常有用,例如,數據的初始化和清理、動畫效果的觸發等。在Vue.js 3.x中,這兩個生命周期鉤子函數仍然存在,并且在組件被keep-alive緩存時也會被調用,但也可在普通組件中使用,用于控制組件的激活和停用狀態。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/15481.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/15481.shtml
英文地址,請注明出處:http://en.pswp.cn/web/15481.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

RDD介紹

RDD設計背景 在實際應用中,存在許多迭代式計算,這些應用場景的共同之處是 : 不同計算階段之間會重用中間結果,即一個階段的輸出結果會作為下一個階段的輸入. 而目前的MapReduce框架都是把中間結果寫入到HDFS中,帶來了大量的數據復制、磁盤IO和序列化開銷; 如果能將結果保存在內…

為何程序員35歲就開始被嫌棄了?程序員該如何避免中年危機?

文章目錄 一、為何程序員35歲就開始被嫌棄了?1、技術更新迅速2、職業發展瓶頸3、成本考慮4、年齡歧視5、市場供需變化6、個人因素 二、程序員該如何避免中年危機?1、持續學習與技能更新2、拓展技術廣度與深度3、提升軟技能4、關注行業趨勢與市場變化5、建…

vue3 input輸入框輸入限制(數字)

輸入框限制輸入的內容格式&#xff0c;如&#xff08;金額&#xff0c;數字&#xff09; 金額限制小數點后2位數 <el-input placeholder"請填寫費用" v-model"formMoney.total_money" keyup"formMoney.total_money checkPrice(formMoney.total_…

20240521(代碼整潔和測試入門學習)

測試: 1.測試工程師、測試工具開發工程師、自動化測試工程師。 python&#xff1a; 1、發展背景和優勢&#xff1b; 2、開始多需的工具 interpreter(解釋器) refactor(重構) 2、變量和注釋的基礎語法 3、輸入輸出 i 1 for i in range(1, 11): print(i, end ) 不換行打印…

jupyter notebook 實現聯邦學習模型

聯邦學習(Federated Learning)是一種機器學習框架,它允許多個參與方(例如,移動設備或服務器)在本地數據集上訓練模型,而無需將數據集中到一個位置。這有助于保護數據隱私,并允許在分布式環境中進行模型訓練。 要在Jupyter Notebook中實現聯邦學習模型,你可以遵循以下…

性能大爆炸!為你的Matomo換一個高性能的環境!

隨著我的 Matomo 越來越大&#xff0c;功能需求的增多&#xff0c;插件也變得越來越多&#xff0c;使用傳統的LNMP架構或者LAMP架構都會發現性能正在急劇下級&#xff0c;為此&#xff0c;我們發現了使用FrankenPHP&#xff08;以下簡稱FPHP&#xff09;的方案 首先&#xff0…

Android kotlin協程

說明 可代替線程整異步可控制&#xff0c;靈活 &#xff08;控制優先級&#xff0c;內存占用等&#xff09;速度快 效率高有數量上限 使用 runBlocking 一般用于測試 不建議使用GlobalScope.launch 全局的 生命周期跟隨application 不建議使用CoroutineScope(job) 用 基本使…

櫻花下落的速度是每秒5厘米,我們的心又該以什么速度去接近呢

櫻花下落的速度是每秒五厘米。5年前第一次接觸秒速五厘米的時候&#xff0c;我還在念初中&#xff0c;那時候的我尚且理解不了作品里的太多東西&#xff0c;只是為那輛列車隔開了明里和貴樹感到悲傷&#xff0c;為他們二人那段無疾而終的感情感到遺憾。五年后再一次重溫&#x…

GEE批量導出逐日、逐月、逐季節和逐年的遙感影像(以NDVI為例)

影像導出 1.逐日數據導出2.逐月數據導出3.季節數據導出4.逐年數據導出 最近很多小伙伴們私信我&#xff0c;問我如何高效導出遙感數據&#xff0c;從逐日到逐季度&#xff0c;我都有一套自己的方法&#xff0c;今天就來和大家分享一下&#xff01; ??&#x1f50d;【逐日導出…

Scala 入門介紹和環境搭建

一、簡介 Scala 是一門以 Java 虛擬機&#xff08;JVM&#xff09;為運行環境并將面向對象和函數式編程的最佳特性結合在一起的靜態類型編程語言 (靜態語言需要提前編譯&#xff0c;如&#xff1a;Java、c、c 等&#xff0c;動態語言如&#xff1a;js)Scala 是一門多范式的編程…

【介紹下Pwn,什么是Pwn?】

&#x1f308;個人主頁: 程序員不想敲代碼啊 &#x1f3c6;CSDN優質創作者&#xff0c;CSDN實力新星&#xff0c;CSDN博客專家 &#x1f44d;點贊?評論?收藏 &#x1f91d;希望本文對您有所裨益&#xff0c;如有不足之處&#xff0c;歡迎在評論區提出指正&#xff0c;讓我們共…

CSS3文字與字體

文字與字體 @font-face 用途:定義一種自定義字體,使其可以在網頁中使用。通過@font-face規則,可以指定字體名稱、來源(通常是URL)以及字體的各種變體(如常規、粗體、斜體等)。 @font-face {font-family: MyCustomFont;src: url(mycustomfont.woff2) format(woff2

馮喜運:5.25黃金價格和原油價格加速看跌?未來如何走勢?

【黃金消息面分析】&#xff1a;本周黃金市場經歷劇烈波動&#xff0c;金價創下五個半月來最糟糕的單周表現&#xff0c;盡管周五因美元下跌小幅回升。美聯儲的鷹派立場和美國經濟數據強勁削弱了降息預期&#xff0c;導致金價承壓。然而&#xff0c;分析師對未來金價走勢看法不…

Rolla‘s homework:Image Processing with Python Final Project

對比學習Yolo 和 faster rcnn 兩種目標檢測 要求 Image Processing with Python Final Project Derek TanLoad several useful packages that are used in this notebook:Image Processing with Python Final Project Project Goals: ? Gain an understanding of the object …

leetcode 1049.最后一塊石頭的重量II

思路&#xff1a;01背包 其實這道題我們可以轉化一下&#xff0c;乍一看有點像區間dp&#xff0c;很像區間合并那種類型。 但是&#xff0c;后來發現&#xff0c;這道題的精髓在于你如何轉成背包問題。我們可以把這個石頭分成兩堆&#xff0c;然后求出來這兩堆的最小差值就行…

使用git生成SSH公鑰,并設置SSH公鑰

1、在git命令行里輸入以下命令 ssh-keygen -t rsa 2、按回車&#xff0c;然后會看到以下字眼 Generating public/private rsa key pair. Enter file in which to save the key (/c/Users/xxx/.ssh/id_rsa) 例&#xff1a; 3、繼續回車&#xff0c;然后會看到以下字眼 Enter…

【面試干貨】數據庫樂觀鎖,悲觀鎖的區別,怎么實現

【面試干貨】數據庫樂觀鎖&#xff0c;悲觀鎖的區別&#xff0c;怎么實現 1、樂觀鎖&#xff0c;悲觀鎖的區別2、總結 &#x1f496;The Begin&#x1f496;點點關注&#xff0c;收藏不迷路&#x1f496; 1、樂觀鎖&#xff0c;悲觀鎖的區別 悲觀鎖&#xff08;Pessimistic Lo…

web前端框架設計第十課-組件

web前端框架設計第十課-組件 一.預習筆記 組件&#xff1a;Vue最強大的功能之一 1.局部組件注冊 注意事項&#xff1a;template標簽中只能有一個根元素 2.全局組件的注冊 注意事項&#xff1a;組件名的大小寫需要注意&#xff08;實踐&#xff09; 3.案例&#xff08;查詢框…

Vivado 使用教程(個人總結)

Vivado 是 Xilinx 公司推出的一款用于 FPGA 設計的集成開發環境 (IDE)&#xff0c;提供了從設計輸入到實現、驗證、調試和下載的完整流程。本文將詳細介紹 Vivado 的使用方法&#xff0c;包括項目創建、設計輸入、約束文件、綜合與實現、仿真、調試、下載配置等步驟。 一、創建…

設計模式--責任鏈模式

責任鏈模式是一種行為設計模式&#xff0c;它允許將請求沿著處理者鏈進行發送。請求會沿鏈傳遞&#xff0c;直到某個處理者對象負責處理它。這種模式在許多應用場景中非常有用&#xff0c;例如在處理用戶輸入、過濾請求以及實現多級審核時。 應用場景 處理用戶輸入&#xff1…