生命周期(vue)
?
?
代碼和人一樣都是有自己的周期的,只有好好的了解代碼的周期才可以更好的完成項(xiàng)目開(kāi)發(fā),今天我們來(lái)講講vue中提到的"生命周期"和"生命周期鉤子".
第一步我們來(lái)了解一下她倆的含義
a.生命周期:vue實(shí)例從創(chuàng)建到銷毀過(guò)程中發(fā)生的一系列的狀態(tài)
b.生命周期鉤子:鉤子的作用是提供給用戶在不同階段添加自己的代碼的機(jī)會(huì)
第二步我們來(lái)看看vue官網(wǎng)中關(guān)于"生命周期鉤子"的選項(xiàng)有哪些?如下圖(官網(wǎng):https://cn.vuejs.org/v2/api/#beforeCreate)
第三步我們來(lái)了解并解釋一下官網(wǎng)的生命周期流程圖.如圖(https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA)
a.初始化vue實(shí)例
b.初始化事件和讀取生命周期函數(shù)
c.beforeCreate()....這個(gè)時(shí)候你什么都獲取不了,數(shù)據(jù)和dom也操作不了
d.讀取data,computed,watch,methods....以及屬性的監(jiān)聽(tīng),數(shù)據(jù)觀測(cè)(data observer),屬性和方法的運(yùn)算等
e.created().....這個(gè)時(shí)候就可以操作屬性和方法了
f.判斷是否有el配置項(xiàng),如果沒(méi)有就判斷是否執(zhí)行了$mont()(注釋:$mount("#app")叫動(dòng)態(tài)掛載,等價(jià)于配置項(xiàng)中的el:#app),若兩者都沒(méi)有的話就不再往下執(zhí)行了
g.判斷是否有template,如果有,就將template渲染到el上,沒(méi)有就執(zhí)行render
?
h.beforeMount()...這個(gè)時(shí)候還沒(méi)有獲取到dom,不可以操作dom
i.mounted()...這個(gè)時(shí)候你就可以操作dom了(操作dom結(jié)構(gòu)的方式不建議使用document,采用ref)
數(shù)據(jù)發(fā)生變化后
dom更新的流程
j.beforeUpdate()....數(shù)據(jù)以經(jīng)更新但是dom沒(méi)有重新渲染,如果獲取頁(yè)面中的數(shù)據(jù)還是原來(lái)的值
k.updated()....數(shù)據(jù)和dom以及更新,打補(bǔ)丁完成(這個(gè)時(shí)候就可以重新計(jì)算滾動(dòng)條的長(zhǎng)度,輪播圖中的頁(yè)面數(shù)量等)
銷毀
l.beforeDestroy()
m.Vue 實(shí)例指示的所有東西都會(huì)解綁,所有的事件監(jiān)聽(tīng)會(huì)被移出,所有的子實(shí)例也會(huì)被銷毀.
n.destroyed()
附錄,vue.js需要自己去官網(wǎng)下載
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <body><div id="app"><!-- 在vue的作用范圍內(nèi)的標(biāo)簽的唯一標(biāo)識(shí)符 --><p ref="p1">{{message}}</p><p ref="p2">{{message}}</p><p ref="p3">{{message}}</p><p ref="p4">{{message}}</p><p ref="p5">{{title}}</p><p><input type="text" v-model="message"></p><button @click="print()">按鈕</button><div class="box" v-if="isShow"></div></div><div id="app2"><p>{{message}}</p><p><input type="text" v-model="message"></p><button @click="print()">按鈕</button></div><script src="vue.js"></script><script>// 生命周期：vue實(shí)例從創(chuàng)建到銷毀發(fā)生的一系列的狀態(tài)// 生命周期鉤子:鉤子的作用給用戶在不同階段添加自己的代碼的機(jī)會(huì)。// 創(chuàng)建var vm = new Vue({// el: '#app', data: {message: 'hello vue',title: '',isShow: true},methods: {print(){console.log(this.message);}},// 生命周期鉤子/生命周期函數(shù)/鉤子函數(shù) beforeCreate(){console.log('beforeCreate--------------------------------');//無(wú)效：// console.log(this.message);// this.print(); },created(){console.log('created--------------------------------');//可以使用屬性和方法等了// console.log(this.message);// this.print(); },beforeMount(){console.log('beforeMount--------------------------------');console.log(document.querySelector('p').innerText);console.log(this.$refs);},mounted(){console.log('mounted--------------------------------');console.log(document.querySelector('p').innerText);console.log(this.$refs);console.log(this.$refs.p1.innerText);},beforeUpdate(){console.log('beforeUpdate--------------------------------');console.log(this.message);console.log(this.$refs.p1.innerText);},updated(){console.log('updated--------------------------------');console.log(this.message);console.log(this.$refs.p1.innerText);},beforeDestroy(){console.log('beforeDestroy--------------------------------');},destroyed(){console.log('destroyed');},//捕獲子組件的異常// errorCaptured(){// console.log('errorCaptured');// }})?
轉(zhuǎn)載于:https://www.cnblogs.com/tc-jieke/p/9265110.html
總結(jié)
- 上一篇： Bean的id、name、ref、ref
- 下一篇： Caused by:java.lang.