vue官網的Lifecycle Diagram:
Vue執行個體有一個完整的生命周期，也就是從開始建立、初始化資料、編譯模闆、挂載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue執行個體從建立到銷毀的過程，就是生命周期。
它可以細分為8個階段：
beforeCreate（建立前）,
created（建立後）,
beforeMount(載入前),
mounted（載入後）,
beforeUpdate（更新前）,
updated（更新後）,
beforeDestroy（銷毀前）,
destroyed（銷毀後）
每個階段的詳細情況:
- 執行個體、元件通過new Vue() 建立出來之後會初始化事件和生命周期，然後就會執行beforeCreate鈎子函數，這個時候，資料還沒有挂載呢，隻是一個空殼，無法通路到資料和真實的dom，一般不做操作
- 挂載資料，綁定事件等等，然後執行created函數，這個時候已經可以使用到資料，也可以更改資料,在這裡更改資料不會觸發updated函數，在這裡可以在渲染前倒數第二次更改資料的機會，不會觸發其他的鈎子函數，一般可以在這裡做初始資料的擷取
- 接下來開始找執行個體或者元件對應的模闆，編譯模闆為虛拟dom放入到render函數中準備渲染，然後執行beforeMount鈎子函數，在這個函數中虛拟dom已經建立完成，馬上就要渲染,在這裡也可以更改資料，不會觸發updated，在這裡可以在渲染前最後一次更改資料的機會，不會觸發其他的鈎子函數，一般可以在這裡做初始資料的擷取
- 接下來開始render，渲染出真實dom，然後執行mounted鈎子函數，此時，元件已經出現在頁面中，資料、真實dom都已經處理好了,事件都已經挂載好了，可以在這裡操作真實dom等事情...
- 當元件或執行個體的資料更改之後，會立即執行beforeUpdate，然後vue的虛拟dom機制會重新建構虛拟dom與上一次的虛拟dom樹利用diff算法進行對比之後重新渲染，一般不做什麼事兒
- 當更新完成後，執行updated，資料已經更改完成，dom也重新render完成，可以操作更新後的虛拟dom
- 當經過某種途徑調用$destroy方法後，立即執行beforeDestroy，一般在這裡做一些善後工作，例如清除計時器、清除非指令綁定的事件等等
- 元件的資料綁定、監聽...去掉後隻剩下dom空殼，這個時候，執行destroyed，在這裡做善後工作也可以
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p class="myp">A元件</p>
<button @click="destroy">destroy</button>
<input type="text" v-model="msg">
<p>msg:{{msg}}</p>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script>
//生命周期：初始化階段 運作中階段 銷毀階段
Vue.component("aaa",{
template:"#aaa",
data:function(){
return {msg:'hello'}
},
timer:null,
methods:{
destroy:function(){
this.$destroy()//
}
},
beforeCreate:function(){
console.log('beforeCreate:剛剛new Vue()之後，這個時候，資料還沒有挂載呢，隻是一個空殼')
console.log(this.msg)//undefined
console.log(document.getElementsByClassName("myp")[0])//undefined
},
created:function(){
console.log('created:這個時候已經可以使用到資料，也可以更改資料,在這裡更改資料不會觸發updated函數')
this.msg+='!!!'
console.log('在這裡可以在渲染前倒數第二次更改資料的機會，不會觸發其他的鈎子函數，一般可以在這裡做初始資料的擷取')
console.log('接下來開始找執行個體或者元件對應的模闆，編譯模闆為虛拟dom放入到render函數中準備渲染')
},
beforeMount:function(){
console.log('beforeMount：虛拟dom已經建立完成，馬上就要渲染,在這裡也可以更改資料，不會觸發updated')
this.msg+='@@@@'
console.log('在這裡可以在渲染前最後一次更改資料的機會，不會觸發其他的鈎子函數，一般可以在這裡做初始資料的擷取')
console.log(document.getElementsByClassName("myp")[0])//undefined
console.log('接下來開始render，渲染出真實dom')
},
// render:function(createElement){
// console.log('render')
// return createElement('div','hahaha')
// },
mounted:function(){
console.log('mounted：此時，元件已經出現在頁面中，資料、真實dom都已經處理好了,事件都已經挂載好了')
console.log(document.getElementsByClassName("myp")[0])
console.log('可以在這裡操作真實dom等事情...')
// this.$options.timer = setInterval(function () {
// console.log('setInterval')
// this.msg+='!'
// }.bind(this),500)
},
beforeUpdate:function(){
//這裡不能更改資料，否則會陷入死循環
console.log('beforeUpdate:重新渲染之前觸發')
console.log('然後vue的虛拟dom機制會重新建構虛拟dom與上一次的虛拟dom樹利用diff算法進行對比之後重新渲染')
},
updated:function(){
//這裡不能更改資料，否則會陷入死循環
console.log('updated:資料已經更改完成，dom也重新render完成')
},
beforeDestroy:function(){
console.log('beforeDestory:銷毀前執行（$destroy方法被調用的時候就會執行）,一般在這裡善後:清除計時器、清除非指令綁定的事件等等...')
// clearInterval(this.$options.timer)
},
destroyed:function(){
console.log('destroyed:元件的資料綁定、監聽...都去掉了,隻剩下dom空殼，這裡也可以善後')
}
})
new Vue({
}).$mount('#app')
</script>
</html>
![Django項目實戰——3—(圖形驗證碼後端邏輯、短信驗證碼、短信驗證碼後端邏輯)1、圖形驗證碼後端邏輯2、短信驗證碼3、短信驗證碼後端邏輯[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)