vue中keep-alive的实现,diff算法
keep-alive的实现
作用:实现组件缓存
钩子函数:
`activated `组件渲染后调用
`deactivated `组件销毁后调用
复制代码
原理:Vue.js
内部将DOM
节点抽象成了一个个的VNode
节点,keep-alive
组件的缓存也是基于VNode
节点的而不是直接存储DOM
结构。它将满足条件(pruneCache与pruneCache)
的组件在cache
对象中缓存起来,在需要重新渲染的时候再将vnode
节点从cache
对象中取出并渲染。
配置属性:
include
字符串或正则表达式。只有名称匹配的组件会被缓存
exclude
字符串或正则表达式。任何名称匹配的组件都不会被缓存
max
数字、最多可以缓存多少组件实例
理解Vue中的diff算法
在js中,渲染真实DOM
的开销是非常大的, 比如我们修改了某个数据,如果直接渲染到真实DOM
, 会引起整个dom
树的重绘和重排。那么有没有可能实现只更新我们修改的那一小块dom而不要更新整个dom
呢?此时我们就需要先根据真实dom
生成虚拟dom
, 当虚拟dom
某个节点的数据改变后会生成有一个新的Vnode
, 然后新的Vnode
和旧的Vnode
作比较,发现有不一样的地方就直接修改在真实DOM上,然后使旧的Vnode
的值为新的Vnode
。
diff的过程就是调用patch
函数,比较新旧节点,一边比较一边给真实的DOM
打补丁。在采取diff
算法比较新旧节点的时候,比较只会在同层级进行。 在patch
方法中,首先进行树级别的比较 new Vnode
不存在就删除 old Vnode
old Vnode
不存在就增加新的Vnode
都存在就执行diff更新 当确定需要执行diff算法时,比较两个Vnode
,包括三种类型操作:属性更新,文本更新,子节点更新 新老节点均有子节点,则对子节点进行diff
操作,调用updatechidren
如果老节点没有子节点而新节点有子节点,先清空老节点的文本内容,然后为其新增子节点 如果新节点没有子节点,而老节点有子节点的时候,则移除该节点的所有子节点 老新老节点都没有子节点的时候,进行文本的替换
updateChildren 将Vnode
的子节点Vch和oldVnode的子节点oldCh提取出来。 oldCh和vCh
各有两个头尾的变量StartIdx和EndIdx
,它们的2个变量相互比较,一共有4种比较方式。如果4种比较都没匹配,如果设置了key
,就会用key
进行比较,在比较的过程中,变量会往中间靠,一旦StartIdx>EndIdx
表明oldCh和vCh
至少有一个已经遍历完了,就会结束比较。
- 点赞
- 收藏
- 关注作者
评论(0)