码迷,mamicode.com
首页 > 其他好文 > 详细

keep-alive与生命周期函数

时间:2021-02-01 12:49:47      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:模板   img   keep   src   一个   图片   创建过程   简单   profile   

理解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(‘当页面刷新时触发‘)
}
// actived和deactived函数只有在组件使用了keep-alive时才有效
activated() {
	console.log(‘当组件处于活跃状态时触发‘)
}

deactivated() {
	console.log(‘当组件不处于活跃状态时触发‘)
}

keep-alive与生命周期函数

标签:模板   img   keep   src   一个   图片   创建过程   简单   profile   

原文地址:https://www.cnblogs.com/jincanyu/p/14352641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!