Vue2x 怎么处理当存在非常多(1k+)组件的情况下的更新问题

问题描述:
1.一次 flushSchedule 会触发 1k+ 个的渲染 watcher 更新,即走 watcher.run、_update、patch等逻辑,一次 4ms。
2.该组件存在两个 children component,具体涉及到的是 children 的 propsData 的更新。
3.这个整个更新过程耗费了 6s 左右。

个人思考:
1.可能是组件逻辑太过复杂,渲染 watcher 的更新过程变慢,是否得优化组件结构。
2.渲染 watcher 的更新过程太过繁杂,是否针对我的组件重写一个渲染 watcher 的更新过程,化繁为简。

希望有过这方面实践的同学给予一些建议,感谢。
阅读 1.8k
2 个回答

组件数量太多确实非常影响响应速度,一般要结合业务精简组件数量————什么情况需要那么多组件?递归的还是循环的?可以考虑动态渲染。

目前的解决方案:
1.拍平我的组件,不允许它有 childrencomponent,即减少 render 次数
2.分片控制组件渲染过程,避免一个很长的 watcherqueue 遍历更新过程等待

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题