喜欢寂寞,爱象一首歌,煤矿安全保证书
开始
这次的题目看上去好像有点奇怪：把两个没有什么关联的名词放在了一起，正如大家所知道的，transition-group就是vue的内置组件之一主要用在列表的动画上，但是会跟virtual dom diff算法有什么特别的联系吗？答案明显是有的，所以接下来就是代码分解。
缘起
主要是最近对vue的virtual dom diff算法有点模糊了，然后顺手就打开了电脑准备温故知新；但是很快就留意到代码：
// removeonly is a special flag used only by <transition-group> // to ensure removed elements stay in correct relative positions // during leaving transitions const canmove = !removeonly
removeonly是什么鬼，怎么感觉以前对这个变量没啥印象的样子，再看注释：removeonly只用在transition-group组件上，目的是为了保证移除的元素在离开的动画过程中能够保持正确的相对位置（请原谅我的渣渣翻译）；好吧，是我当时阅读源码的时候忽略了一些细节。但是这里引起我极大的好奇心，为了transition-group组件竟然要在diff算法动手脚，这个组件有什么必要性一定要这么做尼。
深入
首先假如没有这个removeonly的干扰，也就是canmove为true的时候，正常的diff算法会是怎样的流程：
我要评论
while (oldstartidx <= oldendidx && newstartidx <= newendidx) {
if (isundef(oldstartvnode)) {
oldstartvnode = oldch[++oldstartidx] // vnode has been moved left
} else if (isundef(oldendvnode)) {
oldendvnode = oldch[--oldendidx]
} else if (samevnode(oldstartvnode, newstartvnode)) {
patchvnode(oldstartvnode, newstartvnode, insertedvnodequeue, newch, newstartidx)
oldstartvnode = oldch[++oldstartidx]
newstartvnode = newch[++newstartidx]
} else if (samevnode(oldendvnode, newendvnode)) {
patchvnode(oldendvnode, newendvnode, insertedvnodequeue, newch, newendidx)
oldendvnode = oldch[--oldendidx]
newendvnode = newch[--newendidx]
} else if (samevnode(oldstartvnode, newendvnode)) { // vnode moved right
patchvnode(oldstartvnode, newendvnode, insertedvnodequeue, newch, newendidx)
canmove && nodeops.insertbefore(parentelm, oldstartvnode.elm, nodeops.nextsibling(oldendvnode.elm))
oldstartvnode = oldch[++oldstartidx]
newendvnode = newch[--newendidx]
} else if (samevnode(oldendvnode, newstartvnode)) { // vnode moved left
patchvnode(oldendvnode, newstartvnode, insertedvnodequeue, newch, newstartidx)
canmove && nodeops.insertbefore(parentelm, oldendvnode.elm, oldstartvnode.elm)
oldendvnode = oldch[--oldendidx]
newstartvnode = newch[++newstartidx]
} else {
if (isundef(oldkeytoidx)) oldkeytoidx = createkeytooldidx(oldch, oldstartidx, oldendidx)
idxinold = isdef(newstartvnode.key)
? oldkeytoidx[newstartvnode.key]
: findidxinold(newstartvnode, oldch, oldstartidx, oldendidx)
if (isundef(idxinold)) { // new element
createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm, false, newch, newstartidx)
} else {
vnodetomove = oldch[idxinold]
if (samevnode(vnodetomove, newstartvnode)) {
patchvnode(vnodetomove, newstartvnode, insertedvnodequeue, newch, newstartidx)
oldch[idxinold] = undefined
canmove && nodeops.insertbefore(parentelm, vnodetomove.elm, oldstartvnode.elm)
} else {
// same key but different element. treat as new element
createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm, false, newch, newstartidx)
}
}
newstartvnode = newch[++newstartidx]
}
}
function samevnode (a, b) {
return (
a.key === b.key && (
(
a.tag === b.tag &&
a.iscomment === b.iscomment &&
isdef(a.data) === isdef(b.data) &&
sameinputtype(a, b)
) || (
istrue(a.isasyncplaceholder) &&
a.asyncfactory === b.asyncfactory &&
isundef(b.asyncfactory.error)
)
)
)
}
首先会判断key是否一致，然后是tag类型还有input类型等等。
所以下标作为key的时候，很明显key会很容易就会判断为一致了，其次就是要看tag类型等等。
继续如果从map里面找到了对应的旧vnode，又会继续把这个vnode对应的dom节点移动到旧的oldstartelem前面。
综上，diff算法的移动都是在旧vnode上进行的，而新vnode仅仅只是更新了elm这个属性。
在个diff算法的最后，可以想象一种情况，元素都会往头尾两边移动，剩下都是待会要剔除的元素了，需要执行离开动画，但是这个效果肯定很糟糕，因为这个时候的列表是打乱了的，我们所期望的动画明显是元素从原有的位置执行离开动画了，那么也就是removeonly存在的意义了。
transition-group的魔法
transition-group是如何利用removeonly的尼；直接跳到transition-group的源码上，直接就是一段注释：
// provides transition support for list items. // supports move transitions using the flip technique. // because the vdom's children update algorithm is "unstable" - i.e. // it doesn't guarantee the relative positioning of removed elements, // we force transition-group to update its children into two passes: // in the first pass, we remove all nodes that need to be removed, // triggering their leaving transition; in the second pass, we insert/move // into the final desired state. this way in the second pass removed // nodes will remain where they should be.
大意就是：
这个组件是为了给列表提供动画支持的，而组件提供的动画运用了flip技术；
因为diff算法是不能保证移除元素的相对位置的(正如我们上面总结的)，我们让transition-group的更新必须经过了两个阶段，第一个阶段：我们先把所有要移除的元素移除以便触发它们的离开动画；在第二个阶段：我们才把元素移动到正确的位置上。
知道了大致的逻辑了，那么transition-group具体是怎么实现的尼？
首先transition-group继承了transiton组件相关的props，所以它们两个真是铁打的亲兄弟。
const props = extend({
tag: string,
moveclass: string
}, transitionprops)
然后第一个重点来了beforemount方法
beforemount () {
const update = this._update
this._update = (vnode, hydrating) => {
const restoreactiveinstance = setactiveinstance(this)
// force removing pass
this.__patch__(
this._vnode,
this.kept,
false, // hydrating
true // removeonly (!important, avoids unnecessary moves)
)
this._vnode = this.kept
restoreactiveinstance()
update.call(this, vnode, hydrating)
}
}
transition-group对_update方法做了特殊处理，先强行进行一次patch，然后才执行原本的update方法，这里也就是刚才注释说的两个阶段的处理；
接着看this.kept，transition-group是在什么时候对vnode tree做的缓存的尼，再跟踪代码发现render方法也做了特殊处理：
render (h: function) {
const tag: string = this.tag || this.$vnode.data.tag || 'span'
const map: object = object.create(null)
const prevchildren: array<vnode> = this.prevchildren = this.children
const rawchildren: array<vnode> = this.$slots.default || []
const children: array<vnode> = this.children = []
const transitiondata: object = extracttransitiondata(this)
for (let i = 0; i < rawchildren.length; i++) {
const c: vnode = rawchildren[i]
if (c.tag) {
if (c.key != null && string(c.key).indexof('__vlist') !== 0) {
children.push(c)
map[c.key] = c
;(c.data || (c.data = {})).transition = transitiondata
} else if (process.env.node_env !== 'production') {
const opts: ?vnodecomponentoptions = c.componentoptions
const name: string = opts ? (opts.ctor.options.name || opts.tag || '') : c.tag
warn(`<transition-group> children must be keyed: <${name}>`)
}
}
}
if (prevchildren) {
const kept: array<vnode> = []
const removed: array<vnode> = []
for (let i = 0; i < prevchildren.length; i++) {
const c: vnode = prevchildren[i]
c.data.transition = transitiondata
c.data.pos = c.elm.getboundingclientrect()
if (map[c.key]) {
kept.push(c)
} else {
removed.push(c)
}
}
this.kept = h(tag, null, kept)
this.removed = removed
}
return h(tag, null, children)
},
这里的处理是首先用遍历transition-group包含的vnode列表，把vnode都收集到children数组还有map上面去，并且把transition相关的属性注入到vnode上，以便vnode移除的时候触发对应的动画。
然后就是如果prevchildren存在的时候，也就是render第二次触发的时候遍历旧的children列表，首先会把最新的transition属性更新到旧的vnode上，然后就是很关键的去获取vnode对应的dom节点的位置（很重要！），并且记录；然后再根据map判断哪些vnode是需要保持的（新旧列表相同的vnode），哪些是需要移除的，最后就是把this.kept指向需要保持的vnode列表；所以this.kept在第一阶段的pacth过程中，才能准确把要移除的vnode先移除，并且不会插入新的vnode，也不会移动dom节点；在执行后面的update方法才会做后面两步。
接着看updated方法，如何去利用flip实现移动动画的尼：
updated () {
const children: array<vnode> = this.prevchildren
const moveclass: string = this.moveclass || ((this.name || 'v') + '-move')
if (!children.length || !this.hasmove(children[0].elm, moveclass)) {
return
}
// we divide the work into three loops to avoid mixing dom reads and writes
// in each iteration - which helps prevent layout thrashing.
children.foreach(callpendingcbs)
children.foreach(recordposition)
children.foreach(applytranslation)
// force reflow to put everything in position
// assign to this to avoid being removed in tree-shaking
// $flow-disable-line
this._reflow = document.body.offsetheight
children.foreach((c: vnode) => {
if (c.data.moved) {
const el: any = c.elm
const s: any = el.style
addtransitionclass(el, moveclass)
s.transform = s.webkittransform = s.transitionduration = ''
el.addeventlistener(transitionendevent, el._movecb = function cb (e) {
if (e && e.target !== el) {
return
}
if (!e || /transform$/.test(e.propertyname)) {
el.removeeventlistener(transitionendevent, cb)
el._movecb = null
removetransitionclass(el, moveclass)
}
})
}
})
},
这里的处理首先会检查把move class加上之后是否有transform属性，如果有就说明有移动的动画；再接着处理：
这就是transition-group所拥有的黑魔法，确实帮我们在背后做了不少的事情。
最后
温故而知新，在写的过程中其实发现了以前的理解还是有很多模糊的地方，说明自己平时阅读代码仍然不够细心，没有做到不求甚解，以后必须多多注意，最后的最后，如有错漏，希望大家能够指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论