Vue的内置组件

1、<keep-alive>是Vue的内置组件，在组件来回切换的时候，为了避免组件重复渲染DOM节点导致的性能问题，将组件状态保寸在内存中。(也就是说会缓存失活的组件，当<keep-alive></keep-alive>包裹的组件中的数据不再发生变化时，会被缓存)

2、<keep-alive> 在包裹动态组件时会缓存不活动的而组件实例，而不是销毁他们。

3、<keep-alive> 不会再DOM树中渲染，也不会在父组件链中存在,(也就是说，在this.$parents中找不到，<keep-alive> 不会在函数式组件中正常工作，因为它们没有缓存实例。

4、<keep-alive>) 和<transition>比较相似。

5、prop
include：类型：字符串或正则表达式。（例：<keep-alive include='One'> 只有组件名为One的组件才会被缓存）。
exclude：类型：字符串或正则表达式。（例：<keep-alive include='Two'> 组件名为Two的组件不会被缓存）。
max：类型：数字。表示最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。（例：<keep-alive :max='5'>）

6、<keep-alive>的钩子函数：activeted 和 deactiveted
activeted：在组件被激活时调用，首次也会被调用，每次<keep-alive>被激活时被调用。
deactivated：在组件被停用时调用。

注意：<keep-alive> 是用在其一个直属的子组件被开关的情形。如果你在其中有 v-for 则不会工作。如果有上述的多个条件性的子元素，<keep-alive> 要求同时只有一个子元素被渲染。

使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子依然不会被调用！另外在服务端渲染时此钩子也不会被调用的。

当引入keep-alive 的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。
所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。