組件生命周期
一個組件 從創(chuàng)建 到 到最后銷毀的整個過程
生命周期圖示
- 四大階段
- 初始化
- beforeCreate() 不常用 無法調(diào)用data以及調(diào)用methods
- created() 已經(jīng)初始化完成，完成對于 data數(shù)據(jù)的監(jiān)聽，在這里可以操作data和methods。 使用場景：一般在這里 調(diào)用 組件 初始化 數(shù)據(jù)的請求函數(shù)
- 初始化
- 編譯階段，視圖渲染掛載
- beforeMount() 沒啥用
- mounted() 在這里可以獲取 當前組件的 生成dom。比如：各種 庫（渲染元素、swiper、better-scroll、ehcarts、富文本編輯器...）
- 編譯階段，視圖渲染掛載
- 數(shù)據(jù)更新，視圖刷新
- beforeUpdate()
- updated() 獲取更新后的dom
- 數(shù)據(jù)更新，視圖刷新
- 銷毀，卸載
- beforeDestroy() 在這里 應(yīng)該清除 全局事件綁定，以及 定時器
- destroyed() 實例已經(jīng)銷毀
- 銷毀，卸載
組件、實例生命周期 是指一個組件從創(chuàng)建到銷毀的整個過程，vue提供了 不同時期的生命周期的鉤子函數(shù)，來監(jiān)控不同的生命周期過程，在這些鉤子函數(shù)中，可以做不同的操作
beforeCreate 實例初始化之前
created 實例已經(jīng)初始化 在這里可以使用data和methods的方法了，一般在這個生命周期內(nèi)，調(diào)用獲取數(shù)據(jù)的ajax函數(shù)
beforeMount 視圖渲染之前
mounted 視圖已經(jīng)渲染，在這里獲取獲取渲染后dom，可以做一些 特效（綁定一些全局的事件..）
beforeUpdate 數(shù)據(jù)更新 視圖重新渲染之前
updated 數(shù)據(jù)更新 視圖 渲染之后 在這里可以獲取 更新后最新的dom
activated 組件激活
deactivated 組件 停止使用
beforeDestroy 實例銷毀之前 在這里可以清楚定時器 銷毀 全局事件如滾動
destroyed 實例銷毀之后
errorCaptured 捕獲錯誤鉤子
注意：
activated
deactivated
當一個組件 通過 keepalive組件緩存 之后，所有的生命周期都不會重新調(diào)用，原因組件被緩存了沒有真正的銷毀。
activated 組件再一次使用時，會調(diào)用 讓緩存的組件 局部刷新（調(diào)用局部刷新 數(shù)據(jù)的 請求函數(shù)）
deactivated 組件 停止使用時會調(diào)用 （清除定時器 銷毀全局的事件）
組件生命周期鉤子函數(shù)
<body>
<div id="app">
<button @click="isShow = !isShow">{{ isShow?"隱藏":'顯示' }}</button>
<home v-if="isShow"></home>
</div>
<template id="home">
<div>
<h3>Home</h3>
<button @click="add">add</button>
<ul ref="oul">
<li v-for="item in arr" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
</body>
<script src="./js/vue.js"></script>
<script>
//定義一個子組件
let Home = {
template:'#home',
data(){
return {
arr:[1,2,3,4,5],
timer:null
}
},
methods:{
add(){
this.arr.push(this.arr.length+1);
}
},
//鉤子函數(shù)
beforeCreate(){
//初始化之前
console.log('初始化之前');
},
created(){
//初始化已經(jīng)完成，這里可以調(diào)用data以及methods的方法
console.log('初始化已經(jīng)完成');
},
beforeMount(){
//編譯之前
console.log('編譯之前');
},
mounted(){
//編譯完成，可以獲取dom當前組件 例如各種庫（swiper，ehcarts等）
console.log('編譯完成');
//定義一些全局的函數(shù)
window.onscroll = function(){
console.log('滾動事件觸發(fā)');
},
this.timer = setInterval(()=>{
console.log('定時器觸發(fā)了');
},1000)
},
beforeUpdata(){
//數(shù)據(jù)更新了，視圖刷新之前
console.log('數(shù)據(jù)更新了，視圖刷新之前');
},
updated(){
//數(shù)據(jù)更新，試圖已經(jīng)刷新完成
console.log('數(shù)據(jù)更新，試圖已經(jīng)刷新完成');
},
beforeDestroy(){
//銷毀之前執(zhí)行，可以在組件銷毀的同時清除定時器或者銷毀全局事件等
console.log('銷毀之前執(zhí)行');
//清除銷毀一些全局的事件
window.onscroll = null;
clearInterval(this.timer);
},
destroyed(){
//銷毀完成
console.log('銷毀完成');
}
}
// 注冊成全局組件
Vue.component('Home',Home)
let vm = new Vue({
el:'#app',
data:{
isShow:true
},
})
</script>
keep-alive
- 包裹其他組件，緩存其他組件,不會被銷毀，只存在激活和停用
- activated()
被keep-alive組件包裹的組件，在 激活時觸發(fā)
- activated()
- deactivated()
被keep-alive組件包裹的組件，在 停用時時觸發(fā)
- deactivated()
<body>
<div id="app">
<button @click="isShow = !isShow">{{ isShow?'隱藏':'顯示' }}</button>
<keep-alive>
<home v-if="isShow"></home>
</keep-alive>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let Home = {
template:`
<div>
<h4>home頁</h4>
<input v-model="msg"/>
</ul>
</div>
`,
data(){
return {
msg:''
}
},
methods:{
fetchData(){
console.log("數(shù)據(jù)過來了")
}
},
beforeCreate(){
console.log("初始化之前")
},
activated(){
console.log("我再一次激活了");
this.fetchData();
},
deactivated(){
console.log('我被停用了');
// 定時定時器和全局的事件
},
created(){
this.fetchData();
console.log("初始化已經(jīng)完成，在這里可以調(diào)用data了可以調(diào)用methods中的方法了")
},
beforeMount(){
console.log("編譯之前")
},
mounted(){
console.log("編譯已經(jīng)完成了，在這里可以獲取dom");
},
beforeUpdate(){
console.log('數(shù)據(jù)更新了，視圖刷新之前');
},
updated(){
console.log("數(shù)據(jù)更新，視圖已經(jīng)刷新完成了");
},
beforeDestroy(){
console.log("銷毀之前");
},
destroyed(){
console.log("組件已經(jīng)銷毀")
}
}
Vue.component('Home',Home)
let vm = new Vue({
el:"#app",
data:{
isShow:true
}
})
</script>
