接着看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)) {
