在使用element-plus的tree的时候,在tree达到三级的时候,来回的切换,会造成页面卡死。然后报错。
本地测试报错如下:
[Vue warn]: Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.
线上报了两个错误一个是堆栈溢出,一个是下面的问题
TypeError: Cannot read properties of null (reading 'emitsOptions')
后续debug发现是因为列表右侧列表使用了v-infinite-scroll这个指令,在数据只有一条或者没有数据的时候,会造成重复触发v-infinite-scroll绑定的事件loadMore。
看官方文档发现其默认的infinite-scroll-immediate是true,即立即执行加载方法,以防初始状态下内容无法撑满容器。对于我们刚进一个页面都会手动请求一次接口,所以这个就没有必要为true了,直接改为false完美解决问题。