生命周期(vue)
?
?
代碼和人一樣都是有自己的周期的,只有好好的了解代碼的周期才可以更好的完成項目開發,今天我們來講講vue中提到的"生命周期"和"生命周期鉤子".
第一步我們來了解一下她倆的含義
a.生命周期:vue實例從創建到銷毀過程中發生的一系列的狀態
b.生命周期鉤子:鉤子的作用是提供給用戶在不同階段添加自己的代碼的機會
第二步我們來看看vue官網中關于"生命周期鉤子"的選項有哪些?如下圖(官網:https://cn.vuejs.org/v2/api/#beforeCreate)
第三步我們來了解并解釋一下官網的生命周期流程圖.如圖(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實例
b.初始化事件和讀取生命周期函數
c.beforeCreate()....這個時候你什么都獲取不了,數據和dom也操作不了
d.讀取data,computed,watch,methods....以及屬性的監聽,數據觀測(data observer),屬性和方法的運算等
e.created().....這個時候就可以操作屬性和方法了
f.判斷是否有el配置項,如果沒有就判斷是否執行了$mont()(注釋:$mount("#app")叫動態掛載,等價于配置項中的el:#app),若兩者都沒有的話就不再往下執行了
g.判斷是否有template,如果有,就將template渲染到el上,沒有就執行render
?
h.beforeMount()...這個時候還沒有獲取到dom,不可以操作dom
i.mounted()...這個時候你就可以操作dom了(操作dom結構的方式不建議使用document,采用ref)
數據發生變化后
dom更新的流程
j.beforeUpdate()....數據以經更新但是dom沒有重新渲染,如果獲取頁面中的數據還是原來的值
k.updated()....數據和dom以及更新,打補丁完成(這個時候就可以重新計算滾動條的長度,輪播圖中的頁面數量等)
銷毀
l.beforeDestroy()
m.Vue 實例指示的所有東西都會解綁,所有的事件監聽會被移出,所有的子實例也會被銷毀.
n.destroyed()
附錄,vue.js需要自己去官網下載
<!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的作用范圍內的標簽的唯一標識符 --><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實例從創建到銷毀發生的一系列的狀態// 生命周期鉤子:鉤子的作用給用戶在不同階段添加自己的代碼的機會。// 創建var vm = new Vue({// el: '#app', data: {message: 'hello vue',title: '',isShow: true},methods: {print(){console.log(this.message);}},// 生命周期鉤子/生命周期函數/鉤子函數 beforeCreate(){console.log('beforeCreate--------------------------------');//無效：// 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');// }})?
轉載于:https://www.cnblogs.com/tc-jieke/p/9265110.html
總結
- 上一篇： Bean的id、name、ref、ref
- 下一篇： Caused by:java.lang.