上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

vue transition-group的patch修改意义

[复制链接]

216

主题

1775

帖子

2322

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2322
发表于 2021-12-31 01:31:46 | 显示全部楼层 | 阅读模式
  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

则没有错误的位置偏移

混的人。

发表回复

本版积分规则

快速回复 返回顶部 返回列表