vue内置了一些比较有用的组件,比如keep-alive就是经常会使用的组件。keep-alive经常和component组件一起使用。
keep-alive组件的作用
keep-alive可以把组件的实例保存在内存中,当组件重新激活时,可以从缓存的虚拟dom中取出组件实例,不需要从组件创建开始再走一遍组件的生命周期。因此,keep-alive包裹的组件,在激活时不会走created、mounted生命周期函数,取而代之的是activated和deactivated生命周期。
keep-alive实现原理
要明白keep-alive的实现原理,首先要知道,内置组件,本质上还是一个组件。这个组件和一般的组件是一样的。只是这个组件是在render函数中实现了缓存组件的主要逻辑。
当一个组件被激活的时候,对应的就会走keep-alive的render函数,keep-alive组件在实现的时候,是预留了插槽的,在render函数中,可以获取到插槽中插入的组件的虚拟dom,虚拟dom上有这个组件的组件实例,keep-alive组件会把组件实例缓存起来。当keep-alive走render函数的时候,如果已经做了缓存,就把缓存的组件实例,赋给新的虚拟dom。