Vue生命周期函數執行順序(使用注意事項)

文章目錄

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeDestroy
  • destroyed

Vue.js 是一個基于 MVVM 模式的前端框架,它的核心是一個響應式的數據綁定系統。在 Vue.js 中,組件是一個可復用的 Vue 實例,它擁有自己的生命周期鉤子函數,用于在組件生命周期的不同階段執行一些特定的邏輯。下面通過例子介紹一下常見的 Vue 組件生命周期:
在這里插入圖片描述

beforeCreate

beforeCreate():在實例被創建之初執行的函數。在這個鉤子函數中,可以進行一些初始化的操作,例如初始化數據、注入組件等等。該函數執行時,Vue實例的數據觀測和事件配置都還沒有被設置,所以不能訪問實例的this屬性,也不能訪問DOM元素。

<template><div>{{ message }}</div>
</template><script>
export default {beforeCreate() {console.log('beforeCreate')this.message = 'Hello, Vue!'},created() {console.log('created')},data() {return {message: ''}}
}
</script>

示例中,beforeCreate鉤子函數中設置了message屬性的值為’Hello, Vue!'。在created鉤子函數中,可以看到這個屬性已經被設置,所以可以將其渲染到模板中。

注意:beforeCreate鉤子函數只會在實例被創建之初執行一次,之后不會再執行。如果需要在實例更新之前進行一些操作,可以使用beforeUpdate鉤子函數。

created

created():在實例被創建之后立即執行。在這個鉤子函數中,可以進行一些初始化的操作,例如獲取數據、設置計算屬性等等。在這個鉤子函數被執行時,Vue實例已經完成了數據觀測和事件配置,但還沒有開始DOM編譯和掛載,所以仍然不能訪問DOM元素。

<template><div>{{ message }}</div>
</template><script>
export default {created() {console.log('created')this.getMessage()},data() {return {message: ''}},methods: {getMessage() {// 獲取數據的方法this.message = 'Hello, Vue!'}}
}
</script>

示例中,created鉤子函數中調用了getMessage方法來獲取數據并設置了message屬性的值。在模板中,可以看到這個屬性已經被渲染出來了。

注意:created鉤子函數只會在實例被創建之后執行一次,之后不會再執行。如果需要在實例更新之后進行一些操作,可以使用updated鉤子函數。

beforeMount

beforeMount():在實例掛載之前執行。在這個鉤子函數中,可以對模板進行一些編譯和渲染前的操作。在這個鉤子函數被執行時,Vue實例已經完成了數據觀測和計算屬性的計算,但還沒有開始DOM編譯和掛載。

<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {beforeMount() {console.log('beforeMount')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>

示例中,beforeMount鉤子函數中設置了myDiv元素的顏色為紅色。在模板中,可以看到這個顏色已經被應用到了渲染出來的元素中。

注意:beforeMount鉤子函數只會在實例掛載之前執行一次,之后不會再執行。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。

mounted

mounted():在實例掛載之后立即執行。在這個鉤子函數中,可以對模板進行一些操作,例如訪問DOM元素、使用第三方插件等等。在這個鉤子函數被執行時,Vue實例已經完成了DOM編譯和掛載,所以可以訪問DOM元素。

<template><div ref="myDiv">{{ message }}</div>
</template><script>
export default {mounted() {console.log('mounted')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}}
}
</script>

示例中,mounted鉤子函數中設置了myDiv元素的顏色為紅色。在模板中,可以看到這個顏色已經被應用到了渲染出來的元素中。

注意:,mounted鉤子函數只會在實例掛載之后執行一次,之后不會再執行。如果需要在實例更新之后進行一些操作,可以使用updated鉤子函數。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。

beforeUpdate

beforeUpdate():在數據更新之前立即執行。在這個鉤子函數中,可以進行一些數據更新前的操作,例如獲取更新前的DOM信息等等。在這個鉤子函數被執行時,Vue實例已經完成了數據的計算和渲染,但還沒有開始DOM重新渲染。

<template><div>{{ message }}</div>
</template><script>
export default {beforeUpdate() {console.log('beforeUpdate')},data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Hello, World!'}}
}
</script>

示例中,定義了一個updateMessage方法,用于更新message屬性的值。在點擊按鈕之后,message屬性的值將會被更新,并且beforeUpdate鉤子函數會被執行。

注意:beforeUpdate鉤子函數只會在數據更新之前執行一次,之后不會再執行。如果需要在數據更新之后進行一些操作,可以使用updated鉤子函數。

updated

updated():在數據更新之后立即執行。在這個鉤子函數中,可以對更新后的DOM進行操作,例如獲取更新后的DOM信息等等。在這個鉤子函數被執行時,Vue實例已經完成了數據的計算和渲染,也完成了DOM重新渲染。

<template><div ref="myDiv">{{ message }}</div><button @click="updateMessage">Update Message</button>
</template><script>
export default {updated() {console.log('updated')this.$refs.myDiv.style.color = 'red'},data() {return {message: 'Hello, Vue!'}},methods: {updateMessage() {this.message = 'Hello, World!'}}
}
</script>

示例中,定義了一個updateMessage方法,用于更新message屬性的值。在點擊按鈕之后,message屬性的值將會被更新,并且updated鉤子函數會被執行。在updated鉤子函數中,將myDiv元素的顏色設置為紅色。

注意:updated鉤子函數只會在數據更新之后執行一次,之前不會執行。如果需要在數據更新之前進行一些操作,可以使用beforeUpdate鉤子函數。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。

beforeDestroy

beforeDestroy():在實例銷毀之前立即執行。在這個鉤子函數中,可以進行一些實例銷毀前的操作,例如清除定時器、取消事件監聽等等。

<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {beforeDestroy() {console.log('beforeDestroy')// 清除定時器、取消事件監聽等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>

示例中,定義了一個destroy方法,用于銷毀Vue實例。在點擊按鈕之后,beforeDestroy鉤子函數會被執行。

注意:beforeDestroy鉤子函數只會在實例銷毀之前執行一次,之后不會再執行。如果需要在實例銷毀之后進行一些操作,可以使用destroyed鉤子函數。

destroyed

destroyed():在實例銷毀之后立即執行。在這個鉤子函數中,可以進行一些實例銷毀后的操作,例如清除定時器、取消事件監聽等等。

<template><div>{{ message }}</div><button @click="destroy">Destroy Instance</button>
</template><script>
export default {destroyed() {console.log('destroyed')// 清除定時器、取消事件監聽等等},data() {return {message: 'Hello, Vue!'}},methods: {destroy() {this.$destroy()}}
}
</script>

示例中,定義了一個destroy方法,用于銷毀Vue實例。在點擊按鈕之后,destroyed鉤子函數會被執行。

注意:destroyed鉤子函數只會在實例銷毀之后執行一次,之前不會執行。如果需要在實例銷毀之前進行一些操作,可以使用beforeDestroy鉤子函數。

另外,Vue.js還提供了其他一些生命周期函數,如activated()和deactivated()用于處理組件的激活和非激活狀態,errorCaptured()用于捕獲組件內部錯誤等等。

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

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

相關文章

input聚焦,失去焦點的那些事

需求&#xff1a; 1&#xff1a;搜索輸入時顯示清空按鈕和搜索按鈕&#xff1b; 2&#xff1a;點擊搜索按鈕失去焦點&#xff0c;并查詢&#xff1b; 3&#xff1a;點擊清空按鈕后重新聚焦&#xff1b; 需要解決的問題&#xff1a; 1&#xff1a;失去焦點需要別的處理的話要加…

Linux命令——nc

Linux命令——nc 文章目錄 Linux命令——nc例子客戶端/服務端模型數據傳輸與服務端交互端口掃描使用代理發送文件聊天工具一次性 Web Server文件夾傳輸遠程克隆磁盤shell反向 shell 參考 netcat&#xff0c;簡寫為 nc&#xff0c;是 unix 系統下一個強大的命令行網絡通信工具&a…

JS手寫Promise.all方法

測試例子 var f11 Promise.resolve("111");var f22 Promise.resolve("222");var f33 Promise.resolve("333");// var f33 Promise.reject("333");1、用原生 Promise 實現 邏輯說明&#xff1a;接收一個由多個promise方法組成的數組…

uniapp開發小程序-pc端小程序下載后端接口的二進制流文件

fileName包含文件名后綴名&#xff0c;比如test.png這種格式 api.DownloadTmtFile后端接口返回的是文件的二進制流 值得注意的是&#xff0c;微信開發者工具中是測試不了wx.saveFileToDisk的&#xff0c;需要真機或者體驗版測試 handleDownload(fileName) {if (!fileName) retu…

mysql表的字段建議加上NOT NULL約束

mysql的列加上NOT NULL約束&#xff0c;這是一個好的實踐&#xff08;但不是一個強制要求&#xff09;&#xff0c;因為它能帶來一些好處&#xff0c;例如&#xff1a; 設置為NOT NULL&#xff0c;可以確保該列沒有NULL值&#xff0c;對該列的數據的規范性進行約束。加上NOT N…

大文件傳輸軟件和傳統軟件的優缺點

在當前信息時代&#xff0c;文件和數據的傳輸已成為我們工作和生活中不可或缺的一環。無論是向同事發送報告還是與朋友分享電影&#xff0c;我們都需要依賴軟件完成這些操作。然而&#xff0c;隨著文件和數據容量的增大&#xff0c;傳統的文件傳輸軟件如FTP、HTTP、SMB、NFS等已…

pycharm中py文件設置參數

在py文件中右鍵 直接對應復制進去即可

sql35(Leetcode1204最后一個能進入巴士的人)

代碼&#xff1a; from t1,t2 自連接 兩兩組合 group by having 求和 選出<1000的項 # Write your MySQL query statement below select a.person_name from Queue a, Queue b where a.turn>b.turn group by a.person_id having sum(b.weight)<1000 order by a.t…

Android:The emulator process for AVD Pixel_2_API_29 was killed

The emulator process for AVD Pixel_2_API_29 was killed 報錯描述&#xff1a; 第一次安裝Android studio好不容易解決gradle啟動模擬器又出現了以下錯誤 The emulator process for AVD Pixel_2_API_29 was killed原因一&#xff1a; 需要安裝Intel x86 Emulator Acceleer…

開啟AI時代產品管理新篇章——寫給產品經理的一本跨界書

在數字化時代&#xff0c;產品經理的角色和能力要求不斷演變。徐修建所著的《搜廣推策略產品經理——互聯網大廠搜索廣告推薦案例》恰逢其時&#xff0c;為新時代的產品經理提供了寶貴的指南。 首先&#xff0c;它通過通俗易懂的語言和生動案例&#xff0c;成功揭示了互聯網大廠…

Linux-----find命令

一、find命令 find介紹&#xff1a; ???find是可以通過文件名稱、類型、大小、權限屬性、時間戳等條件在指定目錄下查找對應文件或者目錄的工具&#xff1b;還可以配合相關命令對匹配到的文件作出后續處理。 二、工作原理及特點 find在查找文件時會遍歷指定的目錄&#xff…

基于conda環境使用mamba/conda安裝配置QIIME 2 2023.9 Amplicon擴增子分析環境,q2cli主要功能模塊介紹及使用

QIIME 2 2023.9 Amplicon Distribution介紹&#xff1a; 概述 qiime團隊專門針對高通量擴增子序列分析退出的conda集成環境&#xff0c;包括了主要和常見的擴增子分析模塊&#xff0c;用戶可以單獨使用各個模塊&#xff0c;也可以使用各模塊組成不同的分析流程。從2023.09版本…

外匯天眼:掌握這個技巧,你也能成為交易高手

在金融市場這個大潮中&#xff0c;外匯交易因其高杠桿、24小時交易等特點吸引著無數交易者。然而成功的交易并非易事&#xff0c;對于投資者來說&#xff0c;外匯交易市場是一個復雜且多變的市場&#xff0c;要在外匯市場中獲得成功就需要扎實的外匯金融基礎知識和獨特的策略&a…

RocketMQ - Spring Cloud Alibaba RocketMQ

Spring Cloud Stream是Spring Cloud體系內的一個框架&#xff0c;用于構建與共享消息傳遞系統連接的高度可伸縮的事件驅動微服務&#xff0c;其目的是簡化消息業務在Spring Cloud應用中的開發。 Spring Cloud Stream的架構圖如下所示&#xff0c;應用程序通過Spring Cloud Str…

論文閱讀《Domain Generalized Stereo Matching via Hierarchical Visual Transformation》

論文地址&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/html/Chang_Domain_Generalized_Stereo_Matching_via_Hierarchical_Visual_Transformation_CVPR_2023_paper.html 概述 立體匹配模型是近年來的研究熱點。但是&#xff0c;現有的方法過分依賴特定數據集上…

五年制專轉本備考沖刺階段,老師給你六點建議助你上岸

1、熱衷的不是學習&#xff0c;而是思考 人與人之間最大的差別在于思維的差別&#xff0c;也可以說是思考的差別。專轉本也是如此&#xff0c;有人思考得簡單&#xff0c;有人思考得復雜&#xff1b;有人想得全面&#xff0c;有人想得膚淺。 只有善于思考&#xff0c;才會對問…

100:ReconFusion: 3D Reconstruction with Diffusion Priors

簡介 官網 少樣本重建必然導致nerf失敗&#xff0c;論文提出使用diffusion模型來解決這一問題。從上圖不難看出&#xff0c;論文一步步提升視角數量&#xff0c;逐步與Zip-NeRF對比。 實現流程 Diffusion Model for Novel View Synthesis 給定一組輸入圖像 x o b s { x i…

Jmeter beanshell編程實例

1、引言 BeanShell是一種小型的&#xff0c;免費的&#xff0c;可嵌入的符合Java語法規范的源代碼解釋器&#xff0c;具有對象腳本語言特性。 在Jmeter實踐中&#xff0c;由于BeanShell組件較高的自由度&#xff0c;通常被用來處理較為復雜&#xff0c;其它組件難以處理的問題…

c語言:文件操作(1)

前言&#xff1a;為什么要使用文件 使用文件可以讓程序在不同運行之間保存和讀取數據。這樣可以實現持久化存儲&#xff0c;即使程序關閉后數據也不會丟失。文件也可以用于數據交換&#xff0c;允許不同程序之間共享信息。在 C 語言中&#xff0c;文件還可以用于讀取配置信息&…

系統架構設計師教程(三)信息系統基礎知識

信息系統基礎知識 3.1 信息系統概述3.1.1 信息系統的定義3.1.2 信息系統的發展3.1.3 信息系統的分類3.1.4 信息系統的生命周期3.1.5 信息系統建設原則3.1.6 信息系統開發方法 3.2 業務處理系統 (TPS)3.2.1 業務處理系統的概念3.2.2 業務處理系統的功能3.2.3 業務處理系統的特點…