Skip to content

Latest commit

 

History

History
44 lines (21 loc) · 1.73 KB

20210526-养老-洲郡选择组件踩坑.md

File metadata and controls

44 lines (21 loc) · 1.73 KB

非公共组件,避免使用双向数据绑定

image-20210525140315553

不是公共组件,避免使用.sync双向数据绑定。父组件与子组件的关系应该是交易关系:我给你什么,你就给我什么,使用手动更新父组件的数据。

image-20210525140816141

image-20210525140736600

避免使用过多循环遍历

比如forEach,filter,includes,map,indexOf都是含有遍历操作的,过多的使用会导致性能下降,卡顿。

比如以下的全选功能:image-20210525142924644

使用过多的遍历操作,而且使用了双向数据绑定,向父组件通知更新数据,一旦数据量过大,浏览器就会卡死。

优化后的代码:

image-20210525143305162

运用computed功能

使用computed,可以重新构造自己想要的数据结构。对需要显示渲染的数据进行自动计算。

比如以下旧的搜索功能:

image-20210525144602860

代码中使用了过多的数组遍历方法,导致性能下降。

image-20210525144818028

只需要在计算属性中,添加一个标记,就能返回匹配到的数据。

列表数据添加自定义属性。

image-20210525145303256

添加一个自己定义的属性,可以用于判断是否选中,