vue.js生命周期钩子函数及缓存
生命周期在工作中用到最多的就是created,mounted,activated,deactivated.由于系统需要缓存,使用了keep-alive<keep-alive :include="/keepalive[a-zA-Z]+/"><router-view></router-view></keep-alive>
·
生命周期
在工作中用到最多的就是created,mounted,activated,deactivated.
由于系统需要缓存,使用了keep-alive
<keep-alive :include="/keepalive[a-zA-Z]+/">
<router-view></router-view>
</keep-alive>
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串或正则表达式来表示
匹配首先检查组件自身的 name 选项,如果 name 选项不可用,则匹配它的局部注册名称(父组件 components 选项的键值)。匿名组件不能被匹配。
//如果希望页面缓存,就在当前页的name属性,加上符合正则条件的name名称。不希望就加上不匹配的正则name名称。
created
实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。
//在刚进入页面的时候,会触发该函数的方法。只在页面刚开始加载时执行一次。
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。
该钩子在服务器端渲染期间不被调用。
//页面已经完成会执行该函数。
activated
keep-alive 组件激活时调用。
该钩子在服务器端渲染期间不被调用。
//当页面存在缓存的时候执行该函数。
deactivated
keep-alive 组件停用时调用。
该钩子在服务器端渲染期间不被调用。
//在页面结束时触发该方法,可清除掉滚动方法等缓存。
更多推荐
已为社区贡献2条内容
所有评论(0)