keep-alive與生命周期函數

理解keep-alive

• keep-alive是Vue內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染
• router-view也是一個組件，如果直接被keep-alive包在里面，所有路徑匹配到的視圖都會被緩存

<keep-alive>
    <router-view></router-view>
</keep-alive>

• keep-alive還有兩個重要屬性
  • include 字符串或正則表達式，只有匹配到的組件才會被緩存
  • exclude 字符串或正則表達式，匹配到的組件不會被緩存

<!-- include和exclude的值為對應組件的名稱 -->
<keep-alive exclude="Profile">

生命周期函數

• 生命周期函數就是vue實例在某一個時間點會自動執行的函數
• 當我們創建一個實例的時候，也就是我們調用 new Vue() 這句話的時候，vue會幫助我們去創建一個實例，創建過程其實並不像我們想的那么簡單，它要經過很多的步驟

created() {
    console.log('當組件被創造出來時觸發')
}

destroyed() {
	console.log('當組件被銷毀時觸發')
}

mounted() {
	console.log('當template模板被掛載到DOM中時觸發')
}

updated() {
	console.log('當data中的數據發生改變，並且需要在頁面中重新渲染時觸發')
}

// actived和deactived函數只有在組件使用了keep-alive時才有效
activated() {
	console.log('當組件處於活躍狀態時觸發')
}

deactivated() {
	console.log('當組件不處於活躍狀態時觸發')
}