Vue js 的生命周期（看了就懂）(推薦)
更新時(shí)間：2019年03月29日 08:49:13 作者：193Eric
這篇文章主要介紹了Vue js生命周期，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
用Vue框架，熟悉它的生命周期可以讓開發(fā)更好的進(jìn)行。
首先先看看官網(wǎng)的圖，詳細(xì)的給出了vue的生命周期:
它可以總共分為8個(gè)階段：
- beforeCreate（創(chuàng)建前）,
- created（創(chuàng)建后）,
- beforeMount(載入前),
- mounted（載入后）,
- beforeUpdate（更新前）,
- updated（更新后）,
- beforeDestroy（銷毀前）,
- destroyed（銷毀后）
然后用一個(gè)實(shí)例的demo 來演示一下具體的效果：
<div id=app>{{a}}</div>
<script>
var myVue = new Vue({
el: "#app",
data: {
a: "Vue.js"
},
beforeCreate: function() {
console.log("創(chuàng)建前")
console.log(this.a)
console.log(this.$el)
},
created: function() {
console.log("創(chuàng)建之后");
console.log(this.a)
console.log(this.$el)
},
beforeMount: function() {
console.log("mount之前")
console.log(this.a)
console.log(this.$el)
},
mounted: function() {
console.log("mount之后")
console.log(this.a)
console.log(this.$el)
},
beforeUpdate: function() {
console.log("更新前");
console.log(this.a)
console.log(this.$el)
},
updated: function() {
console.log("更新完成");
console.log(this.a);
console.log(this.$el)
},
beforeDestroy: function() {
console.log("銷毀前");
console.log(this.a)
console.log(this.$el)
console.log(this.$el)
},
destroyed: function() {
console.log("已銷毀");
console.log(this.a)
console.log(this.$el)
}
});
</script>
運(yùn)行后，查看控制臺，
得到這個(gè)：
然后再methods 里面添加一個(gè)change方法：
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
點(diǎn)擊按鈕之后出現(xiàn)的是：
這就是vue的生命周期，很簡單吧。
以上所述是小編給大家介紹的Vue js生命周期詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了vue3-HOOKS模塊化處理方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue雙向數(shù)據(jù)綁定與響應(yīng)式原理深入探究
本節(jié)介紹雙向數(shù)據(jù)綁定以及響應(yīng)式的原理，回答了雙向數(shù)據(jù)綁定和數(shù)據(jù)響應(yīng)式是否相同，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-08-08
Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明
這篇文章主要介紹了Vue中computed(計(jì)算屬性)和watch(監(jiān)聽屬性)的用法及區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
element el-input directive數(shù)字進(jìn)行控制
本文介紹了vue使用directive 進(jìn)行控制的方法，使用element開發(fā)的過程中遇到循環(huán)的數(shù)據(jù)只能輸入數(shù)字，并且有不要小數(shù)點(diǎn)，有需要小數(shù)點(diǎn)的，就有一定的參考價(jià)值，有興趣的可以了解一下2018-10-10
vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒
時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue axios重復(fù)點(diǎn)擊取消上一次請求封裝的方法
這篇文章主要介紹了vue axios重復(fù)點(diǎn)擊取消上一次請求封裝的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要介紹了element-ui表格列金額顯示兩位小數(shù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js自定義指令的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10