您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“Vue組件生命周期實(shí)例分析”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“Vue組件生命周期實(shí)例分析”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學(xué)習(xí)新知識(shí)吧。
組件的生命周期分為四個(gè)階段: - create(創(chuàng)建) - mount(掛載) - update(更新) - destroy(銷毀)
先看看官方的解釋: 每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過一系列的初始化過程——例如,需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時(shí)更新 DOM 等。同時(shí)在這個(gè)過程中也會(huì)運(yùn)行一些叫做生命周期鉤子的函數(shù),這給了用戶在不同階段添加自己的代碼的機(jī)會(huì)。
鉤子函數(shù)到底是個(gè)啥意思呢? 組件在加載的過程中,加載到某個(gè)階段時(shí),自動(dòng)觸發(fā)的函數(shù)
1. beforeCreate 在實(shí)例初始化之后,數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用;如果在 beforeCreate 函數(shù)里面去訪問 data 數(shù)據(jù)對(duì)象,是訪問不到的
<body> <div id="app"> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{ msg:'123' }, watch:{ msg:function(){ console.log("我變了"); } }, beforeCreate(){ console.log("創(chuàng)建組件data對(duì)象之前自動(dòng)觸發(fā)~~~"); console.log("beforeCreate",this.msg); } }) </script> </body>
結(jié)果:在 beforeCreate 函數(shù)中無法得到 msg 的值
2. created
在執(zhí)行 created 函數(shù)前,已經(jīng)有了數(shù)據(jù)對(duì)象 data,以及完成了事件的初始化,但$el 屬性目前不可見;
在 created 函數(shù)里面可以使用數(shù)據(jù),也可以更改數(shù)據(jù);
調(diào)用 Vue 方法,可以獲取原本 HTML 上的直接加載出來的 DOM,但是無法獲取到通過掛載模板生成的 DOM(例如:v-for循環(huán)遍歷 Vue.list 生成 li)
<body> <div id="app"> <input type="text" v-model="msg"> </div> <script> new Vue({ el:"#app", data:{ msg:'123' }, watch:{ msg:function(){ console.log("我變了"); } }, beforeCreate(){ console.log("創(chuàng)建組件data對(duì)象之前自動(dòng)觸發(fā)~~~"); console.log("beforeCreated",this.msg); }, created:function(){ console.log("創(chuàng)建組件data對(duì)象之后自動(dòng)觸發(fā)~~~"); this.msg=100000; console.log("created",this.msg); console.log("li數(shù)量:",document.getElementsByTagName("li").length); console.log("p數(shù)量:",document.getElementsByTagName("p").length); } }) </script>
結(jié)果:在 created 函數(shù)中我們成功的拿到了、更改了 msg 的值。并且數(shù)據(jù)被更改后出發(fā)了watch 屬性中的方法。 而且可以獲取原本HTML 上的直接加載出來的 DOM(p 元素),但是無法獲取到通過掛載模板生成的 DOM(例如:v-for 循環(huán)遍歷 Vue.list 生成 li 元素)
注意:create階段還沒有創(chuàng)建虛擬dom
3.beforeMount
在掛載開始之前被調(diào)用,相關(guān)的(渲染函數(shù))模板首次被調(diào)用。$el 屬性可見。但此時(shí)在 beforeMount 函數(shù)中依然無法無法獲取到通過掛載模板生成的DOM(例如:v-for 循環(huán)遍歷 Vue.list 生成 li 元素)
在此函數(shù)之前都沒有建立虛擬dom
beforeMount:function(){ console.log(this.$el); console.log("li數(shù)量:",document.getElementsByTagName("li").length); }
4.mounted
執(zhí)行完 beforeMount 函數(shù)后,$e l elel 被新創(chuàng)建的 vm.$el 替換,并掛載到實(shí)例上去之后調(diào)用該鉤子函數(shù)。
這里才能獲取初始數(shù)據(jù)list渲染出來的li
掛載后我們已經(jīng)可以看見網(wǎng)頁內(nèi)容了,只不過還未操作
mounted:function(){ console.log(this.$el); console.log("li數(shù)量:",document.getElementsByTagName("li").length); }
結(jié)果:同樣的代碼,放在 beforeMount 和 mounted 函數(shù)中結(jié)果完全不一樣
在 update 階段,虛擬 dom 監(jiān)聽數(shù)據(jù)變化,隨時(shí)更新 dom
5. beforeUpdate 當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,beforeUpdate 這個(gè)鉤子函數(shù)才會(huì)執(zhí)行
6. updated 虛擬 dom 重新渲染后執(zhí)行
7.beforeDestroy 實(shí)例銷毀之前調(diào)用。在這一步,實(shí)例仍然完全可用
8.destroyedVue 實(shí)例銷毀后調(diào)用。調(diào)用后,Vue 實(shí)例指示的所有東西都會(huì)解綁定,所有的事件監(jiān)聽器會(huì)被移除,所有的子實(shí)例也會(huì)被銷毀。
<body> <div id="app"> <input type="text" v-model="msg"> <ul> <li v-for="(elem,index) of list" :key="index">{{elem}}</li> </ul> <p>p1</p> <p>p2</p> <p>p3</p> <h2>數(shù)量:{{count}}</h2> </div> <script> new Vue({ el:"#app", data:{ msg:'123', list:['a','b','c'], count:0 }, watch:{ msg:function(){ console.log("我變了"); } }, beforeCreate(){ console.log("創(chuàng)建組件data對(duì)象之前自動(dòng)觸發(fā)~~~"); console.log("beforeCreated",this.msg); }, created:function(){ console.log("創(chuàng)建組件data對(duì)象之后自動(dòng)觸發(fā)~~~"); this.msg=100000; console.log("created",this.msg); console.log("li數(shù)量:",document.getElementsByTagName("li").length); console.log("p數(shù)量:",document.getElementsByTagName("p").length); }, beforeMount:function(){ console.log(this.$el); console.log("li數(shù)量:",document.getElementsByTagName("li").length); }, mounted:function(){ console.log(this.$el); console.log("li數(shù)量:",document.getElementsByTagName("li").length); setInterval(()=>{ this.count++; },1000) }, beforeUpdate(){ console.log("更新組件的data變量前自動(dòng)觸發(fā)~~~") }, updated(){ console.log("更新組件的data變量后自動(dòng)觸發(fā)~~~"); if(this.count>3){ this.$destroy(); } }, beforeDestroy(){ console.log("銷毀當(dāng)前組件前自動(dòng)觸發(fā)~~~") }, destroyed(){ console.log("銷毀組件后自動(dòng)觸發(fā)~~~"); } }) </script> </body>
讀到這里,這篇“Vue組件生命周期實(shí)例分析”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。