引出生命周期：
1.生命周期又名：生命周期回調函數、生命周期函數、生命周期鈎子。
2.是什麼：Vue在關鍵時刻幫我們調用的一些特殊名稱的函數。
3.生命周期函數的名字不可更改，但函數的具體内容是程式員根據需求編寫的。
4.生命周期函數中的this指向是vm 或 元件執行個體對象。
<!-- 準備好一個容器-->
<div id="root">
<h2 v-if="a">你好啊</h2>
<h2 :style="{opacity}">歡迎學習Vue</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生産提示。
new Vue({
el:'#root',
data:{
a:false,
opacity:1
},
methods: {
},
//Vue完成模闆的解析并把初始的真實DOM元素放入頁面後（挂載完畢）調用mounted
mounted(){
console.log('mounted',this)
setInterval(() => {
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
})
//通過外部的定時器實作（不推薦）
/* setInterval(() => {
vm.opacity -= 0.01
if(vm.opacity <= 0) vm.opacity = 1
},16) */
</script> 完整生命周期
<body>
<!-- 準備好一個容器-->
<div id="root" :x="n">
<h2 v-text="n"></h2>
<h2>目前的n值是：{{n}}</h2>
<button @click="add">點我n+1</button>
<button @click="bye">點我銷毀vm</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生産提示。
new Vue({
el:'#root',
// template:`
// <div>
// <h2>目前的n值是：{{n}}</h2>
// <button @click="add">點我n+1</button>
// </div>
// `,
data:{
n:1
},
methods: {
add(){
console.log('add')
this.n++
},
bye(){
console.log('bye')
this.$destroy()
}
},
watch:{
n(){
console.log('n變了')
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
},
})
</script> 總結生命周期
常用的生命周期鈎子：
1.mounted: 發送ajax請求、啟動定時器、綁定自定義事件、訂閱消息等【初始化操作】。
2.beforeDestroy: 清除定時器、解綁自定義事件、取消訂閱消息等【收尾工作】。
關于銷毀Vue執行個體
1.銷毀後借助Vue開發者工具看不到任何資訊。
2.銷毀後自定義事件會失效，但原生DOM事件依然有效。
3.一般不會在beforeDestroy操作資料，因為即便操作資料，也不會再觸發更新流程了。
<!-- 準備好一個容器-->
<div id="root">
<h2 :style="{opacity}">歡迎學習Vue</h2>
<button @click="opacity = 1">透明度設定為1</button>
<button @click="stop">點我停止變換</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在啟動時生成生産提示。
new Vue({
el:'#root',
data:{
opacity:1
},
methods: {
stop(){
this.$destroy()
}
},
//Vue完成模闆的解析并把初始的真實DOM元素放入頁面後（挂載完畢）調用mounted
mounted(){
console.log('mounted',this)
this.timer = setInterval(() => {
console.log('setInterval')
this.opacity -= 0.01
if(this.opacity <= 0) this.opacity = 1
},16)
},
beforeDestroy() {
clearInterval(this.timer)
console.log('vm即将駕鶴西遊了')
},
})
</script> 代碼摘錄于尚矽谷Vue學習課件
![飛5的Spring Boot2（6）- 導入外部配置[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)