优化问题

重绘和重排

1. 使用 \(js\) 修改样式的时候，不要直接修改样式，而是使用 \(class\) 来替换样式。
2. 对不需要的页面，使用 \(display:none\) 进行隐藏。
3. 对 \(DOM\) 元素进行操作的时候，先使他脱离文档流，修改完成之后带回文档。

组件封装

组件封装可以提高代码的可复用性和可维护性。

1. 将组件的样式，逻辑，模版进行分离，方便复用和维护。
2. 使用\(props\) 进行组件之间的通信，传递数据和事件。
3. 使用插槽来提高组件的灵活性，允许组件内容可以自定义。
4. 将组件的通用功能封装成可复用的\(mixin\)，以便在多个组件中共享。

虚拟列表

虚拟列表的基本原理是将大量数据分成多个小块，只渲染当前视口内的数据。这样可以避免一次性渲染所有数据，减少 DOM 元素的数量，从而提高页面渲染性能和用户体验。

虚拟列表高度不一致怎么办？

动态计算每个元素的实际高度，并记录下来，以便在滚动时计算元素的正确位置，从而避免出现错位。

在虚拟列表中，使用已存储的子元素高度信息来计算视口中应该渲染哪些子元素。根据已知的子元素高度和视口的高度来动态计算可见子元素的数量。通过维护一个滚动位置，可以确定哪些子元素应该在视口中渲染，然后只渲染这些子元素。