Vue js 的生命周期（看了就懂）(推薦)
更新時(shí)間：2019年03月29日 08:49:13 作者：193Eric
這篇文章主要介紹了Vue js生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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 來(lái)演示一下具體的效果：
<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)行后，查看控制臺(tái)，
得到這個(gè)：
然后再methods 里面添加一個(gè)change方法：
<div id=app>{{a}}
<button v-on:click="change">change</button>
</div>
點(diǎn)擊按鈕之后出現(xiàn)的是：
這就是vue的生命周期，很簡(jiǎn)單吧。
以上所述是小編給大家介紹的Vue js生命周期詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中跳轉(zhuǎn)界面的3種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式
這篇文章主要介紹了詳解Nuxt內(nèi)導(dǎo)航欄的兩種實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue Element前端應(yīng)用開發(fā)之常規(guī)的JS處理函數(shù)
在我們使用Vue Element處理界面的時(shí)候，往往碰到需要利用JS集合處理的各種方法，如Filter、Map、reduce等方法，也可以涉及到一些對(duì)象屬性賦值等常規(guī)的處理或者遞歸的處理方法，本篇隨筆列出一些在VUE+Element 前端開發(fā)中經(jīng)常碰到的JS處理場(chǎng)景，供參考學(xué)習(xí)。2021-05-05
本文主要介紹了ElementUI中el-tabs事件綁定的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決
Vue項(xiàng)目devServer.proxy代理配置詳解的是一個(gè)非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說(shuō)明及配置正確不生效問(wèn)題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue使用Pinia輕松實(shí)現(xiàn)狀態(tài)管理
pinia，一個(gè)基于Vue3的狀態(tài)管理庫(kù)，它可以幫助開發(fā)人員管理Vue應(yīng)用程序的狀態(tài)，本文主要為大家介紹了Pinia的用法，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例
今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue響應(yīng)式原理源碼剖析的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-10-10
vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
antd中table展開行默認(rèn)展示,且不需要前邊的加號(hào)操作
這篇文章主要介紹了antd中table展開行默認(rèn)展示,且不需要前邊的加號(hào)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11