vue动态路由组件缓存
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop :
- include : 字符串或者正则表达式， 只有匹配的组件才会被缓存 。 （也可用数组，但是中间不能有空格！）
- exclude : 字符串或者正则表达式，匹配的元素将不会被缓存 。（也可用数组，但是中间不能有空格！）
- max : 同时缓存几个 ，超过几个之后的就不会被缓存了。
有两个生命周期函数：
activated ：激活
deactivated ：失活
利用keep-alive实现滚动条保存：
思路 ： 在路由页面离开 beforeRouterEnter 中保存当前滚动条距离顶部的位置，再用 activated 钩子函数 当他再次被激活时，让他的滚动条等于离开时保存的那个值。
vue中生命周期钩子函数
beforeCreate ：组件实例刚被创建，组件属性计算之前，如data属性等
created ：组件实例创建完成，属性已绑定，但DOM还未生成，$el属性还不存在
beforeMount ：模板编译 / 挂载之前
mounted ：模板编译 / 挂载之后
beforeUpdate ：组件更新之前
updated ：组件更新之后
activated ：组件被激活时调用
deactivated ：组件被移除时调用
beforeDestory ：组件销毁前调用
destoryed ：组件销毁后调用
(1) 创建阶段
创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候数据还没初始化和绑定，而created的时候就生成好了。
(2) 挂载阶段
beforeMount和mounted两者主要区别在于模板是否编译和挂载了。
(3) 更新阶段
beforeUpdate 和 updated 就是当数据发生变化的时候出发的。
(4) 销毁阶段
beforeDestory 和 destoryed 的区别就是el的值data的数据依然在的。这是因为$destroy只是销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom。
网友评论