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('当组件不处于活跃状态时触发')
}