Vue的keep-alive、虚拟DOM的作用、diff算法

一、keep-alive

作用：keep-alive标签是vue的内置标签，可在组件切换过程中将状态保留在内存中，防止DOM重复渲染。

标签属性：include:符合条件的组件会被缓存，exclude：符合条件的组件不会被缓存。

生命周期钩子：activated进入页面时获取最新数据，deactivated离开页面时调用。

使用方法：

1.在标签的include属性中写入需要缓存的组件名或者使用v-bind匹配相应的正则表达式，exclude同理。

2.结合vue-router,在router中使用meta配置项，可在router-view标签中使用v-if或v-show进行展示，亦可路由守卫中搭配to和form.meata.属性值使用。

 

模板转换为视图的过程？

答：

　　1.vue通过编译将template模板转换为渲染函数，执行渲染函数将会获得一个虚拟节点树 

　　2.结合vue自身的响应式系统，在状态改变时只能计算出重新渲染组件的最小代价并应用到真实DOM中去。

二、vue虚拟DOM

定义：虚拟DOM就是一颗以js对象(虚拟节点)作为基础的树，用对象熟悉描述节点，它是对真实DOM的抽象，最少会包含标签名tag、属性attrs和子元素对象children三个属性。

作用：1.提供与真实DOM节点相对应的虚拟节点vnode；2.将新的虚拟节点与旧的虚拟节点oldvnode进行比对，然后更新视图。

例子：比如ul的li中仅改变一个，不用覆盖全部ul，而只是改变该li。

优点：具备跨平台的优势，避免了不必要的DOM操作，加快了初始化渲染的速度，降低了内存的消耗。

 

三、diff算法

作用：在将新旧虚拟节点进行比对后，需要更新改动的那部分DOM，diff算法就是为了实现这一过程，diff只会在同层级之间进行比较，不会跨层级比较。

实现过程：当数据发送改变时，set方法会通知订阅器Dep调用notify通知所有的订阅者watcher，订阅者就会调用patch给真实的DOM打补丁，更新相应的视图。