动态组件中的keep-alive的作用

为了让大家了解清晰，直接举例子说明

栗子的要求是这样的：点击左边的按钮，显示Left组件，点击右边的按钮显示Right组件 

在Left组件中，点击+1按钮使得数字增加,效果如下：

这个时候点击右边的按钮切换到Right组件，然后再点击左边的按钮切换回Left组件，得到的效果是：

 

此时我们的问题就来了，刚刚我们明明就点击按钮使其添加到4了，那么切换之后怎么又回到原来的0了呢，又该怎么解决呢？

其实变回0不难理解，当再次切换回来的时候，相当于又重新创建了一个新的Left组件，现在就来验证一下：

下面的代码是Left组件源代码，添加created生命周期函数和desroyed生命周期函数来说明情况，

如果再一次切回Left组件的话，如果Left组件被销毁，那么肯定就会触发destroyed生命周期函数 

 

 现在我们就来尝试一下，步骤是：先点击+1按钮使得数字不再是0=>点击有右边的按钮使得切换到Right组件=>随即又点击左边的按钮切回到Left组件

步骤如下：

 现在我们主要研究的问题就是，destroyed生命周期函数是否被触发，如果触发的话，在控制台就会输出”Left组件被销毁“，根据上面的步骤，得到的结果如下：

        

在点击切换到Right组件的时候就被触发了，那么这也证明了为什么数值会回到初始值0了

那么如果想要去保留原来的数值，不想回到初始值，该怎么办呢

使用keep-alive，这是vue内置的。

 

把不希望被销毁的组件放到keep-alive标签中即可，这个时候在按照上面的步骤来切换，会保留你原来的数值，不会被切换回初始值0了。原理就是，Left组件不会被销毁，而是被缓存起来了。

借此就多说keep-alive的一个属性--include属性

该属性可以指定某个组件不会被销毁，而是被缓存起来。 

作用就是使得名称为myLeft组件会被缓存起来，再次切换到该组件的时候，之前的数据都会被保留。这里的myLeft就是大家所谓的Left，只不过我自己另外给它起的名字：

 

 

如果不添加name属性的话，就是默认的组件名称，也就是你在App组件中引入Left组件时起的名字：建议大家都使用name属性来起名字

 

 

还有一点就是，在使用keep-alive时，伴随着有两个生命周期函数：deactivated和activated

deactivated生命周期函数在当组件被缓存起来的时候会自动被触发

activated生命周期函数在当组件被激活的时候会自动被触发