vue transition-group的patch修改意义

李恒道

  beforeUpdate: function beforeUpdate () {
    // force removing pass
    this.__patch__(
      this._vnode,
      this.kept,
      false, // hydrating
      true // removeOnly (!important, avoids unnecessary moves)
    );
    this._vnode = this.kept;
  },

vue的transition-group再beforeupdate的时候做了一个patch

其主要意义是在第一次path的时候删除掉无用元素，同时触发移除效果

vue的patch函数是不稳定的

也就是说如果在一次排序的过程中同时进行删除和添加元素

会由于添加的元素而导致删除元素的相对位置发生改变

从而导致删除元素的效果异常

所以分为两步

第一步先删除元素并触发效果

第二步进行添加元素

然后触发updated钩子函数

计算现有元素的相对位置，触发渲染重新绘制动画效果

如果进行一次patch

比如AAAAA切换成BBBBB

这时候变成了BBBBBAAAAA

A的相对位置发生了改变，产生了极大的位移

而如果两次patch

第一次AAAAA删除，原位置

第二次切换BBBBB

则没有错误的位置偏移