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