不是公共组件,避免使用.sync
双向数据绑定。父组件与子组件的关系应该是交易关系:我给你什么,你就给我什么,使用手动更新父组件的数据。
比如forEach,filter,includes,map,indexOf都是含有遍历操作的,过多的使用会导致性能下降,卡顿。
使用过多的遍历操作,而且使用了双向数据绑定,向父组件通知更新数据,一旦数据量过大,浏览器就会卡死。
优化后的代码:
使用computed,可以重新构造自己想要的数据结构。对需要显示渲染的数据进行自动计算。
比如以下旧的搜索功能:
代码中使用了过多的数组遍历方法,导致性能下降。
只需要在计算属性中,添加一个标记,就能返回匹配到的数据。
添加一个自己定义的属性,可以用于判断是否选中,