Vue之生命周期函數(shù)詳解
更新時(shí)間：2021年11月21日 15:05:06 作者：王同學(xué)要努力
這篇文章主要為大家介紹了Vue之生命周期函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
生命周期函數(shù)
生命周期函數(shù)又叫：生命周期回調(diào)函數(shù)，生命周期函數(shù)、 生命周期鉤子
是什么：Vue在關(guān)鍵時(shí)刻幫我們調(diào)用一些特殊名稱的函數(shù)
生命周期函數(shù)的名字不可更改，但函數(shù)的具體內(nèi)容是程序員根據(jù)需求編寫的
生命周期函數(shù)中的this指向的是vm或者組件實(shí)例化對(duì)象
常用的生命周期的鉤子
1、mounted：發(fā)送ajax請(qǐng)求，啟動(dòng)定時(shí)器，綁定自定義事件 訂閱消息等功能【初始化操作】
2、beforeDestory:清除定時(shí)器，解綁自定義事件，取消訂閱消息等等【首尾工作】
關(guān)于Vue銷毀實(shí)例：
1、銷毀后借助Vue開發(fā)者工具看不到任何信息
2、銷毀后自定義事件會(huì)失效 但原生的DOM事件依然有效
3、一般不會(huì)在beforeDestory操作數(shù)據(jù)，因?yàn)榧词共僮鲾?shù)據(jù)，也不會(huì)再觸發(fā)更新的流程了。
<div id="root">
<h2 :style="{opacity}"> 歡迎學(xué)習(xí)Vue的生命周期</h2>
<button @click="stop">點(diǎn)我停止變化</button>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#root',
data: {
opacity: 1,
},
methods: {
stop() {
// clearInterval(this.timer)
this.$destroy();
}
},
//Vue完成模板解析并把真實(shí)的初始DOM元素放入頁面后（掛載完畢）調(diào)用mounted
mounted() {
this.timer = setInterval(() => {
this.opacity -= 0.01;
if (this.opacity <= 0)
this.opacity = 1;
}, 16)
},
beforeDestroy() {
console.log('vm即將駕鶴西游了');
clearInterval(this.timer)
}
})
</script>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Element-ui Image圖片按需引入大圖預(yù)覽
這篇文章主要為大家介紹了Element-ui Image圖片按需引入大圖預(yù)覽實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
解決Can''t find variable: SockJS vue項(xiàng)目的問題
這篇文章主要介紹了解決Can't find variable: SockJS vue項(xiàng)目的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vant-image本地圖片無法顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
我們有時(shí)候會(huì)碰到這種情況，需要連續(xù)發(fā)送兩個(gè)請(qǐng)求，第二個(gè)請(qǐng)求需要用第一個(gè)請(qǐng)求的某個(gè)返回值作為參數(shù)來作為第二個(gè)請(qǐng)求的請(qǐng)求參數(shù)，這篇文章主要介紹了vue請(qǐng)求如何按順序執(zhí)行,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue 引用自定義ttf、otf、在線字體的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue深復(fù)制的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
uniapp使用webview內(nèi)嵌H5的注意事項(xiàng)詳解
在移動(dòng)應(yīng)用開發(fā)中,uniApp框架提供了一種跨平臺(tái)的解決方案,允許開發(fā)者使用一套代碼來構(gòu)建iOS、Android等多平臺(tái)的應(yīng)用,這篇文章主要給大家介紹了關(guān)于uniapp使用webview內(nèi)嵌H5的注意事項(xiàng),需要的朋友可以參考下2024-07-07
vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄實(shí)現(xiàn)
本文主要介紹了vue3+Element采用遞歸調(diào)用封裝導(dǎo)航欄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
這篇文章主要介紹了詳解vue填坑之解決部分瀏覽器不支持pushState方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07