keep-alive

什么是Keep-alive

keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件,而不是销毁它们.
和transition相似,keep-alive是一个抽象的组件:它自身不会渲染成一个DOM元素,也不会出现在父组件链中

keep-alive作用

在组件切换的过程中,会把切换出去的组件缓存在内存中.避免重复渲染DOM,减少资源消耗提高用户体验.

原理

在created钩子函数调用时将需要缓存的VNode节点保存在this.cache中 在render(页面渲染时),如果VNode的name符合缓存条件(可以用include及exclude控制),则会从this.cache中取出之前缓存的VNode实例进行渲染.

VNode:虚拟DOM,其实就是一个JS对象

参数

include:字符串或正则表达式,只有匹配的name名称会被缓存.
exclude:字符串或正则表达式,被匹配的name名称不会被缓存

生命周期

被keep-alive包裹的组件会多出两个生命周期函数:activated和deactivated.

• activated:
  在keep-alive组件激活时调用
• deactivated:
  在keep-alive组件销毁时调用