第一种方法：更新列表所有元素的可见状态

for (let i = 0; i < items.length; i++) {
    const item = items[i]
    const show = item.name.includes(filter);
    if (this.list[i].hidden == show)
        this.list[i].hidden = !show
}

第二种方法：更新文本内容以及创建和删除元素

const items = this.items.filter(x => x.name.includes(filter))
for (let i = this.list.length; i < items.length; i++)
    this.list.push(this.createItem(items[i]))
const len = this.list.length;
for (let i = 0; i < len; i++) {
    if (i < items.length) {
        const item = items[i]
        this.list[i].textContent = item.name
    } else
        this.list[i].remove()
}

区别：

1. 隐藏状态更新： 在第一种方法中，仅更新 hidden 属性。第二种方法中，可能需要添加和删除元素。某些情况下，隐藏元素可能仍然占据布局空间，而删除元素则不会。
2. 性能优势：用 filter 明确地筛选需要处理的元素，减少了很多潜在的工作。在处理大量数据或需要频繁更新的情况下，第二种方法可能仍然略胜一筹。