Add virtual scroll to improvement performance

[Alisonispig]

When there are more than 100 or 200 messages, there will be a jam when sending messages. Do you have any good suggestions to solve this problem

[antoine92190]

Yes I noticed that issue. The best solution would be to implement a virtual scroller to recycle elements that are not visible in the viewport. This would not be an easy implementation as it would mean reworking the way elements are loaded and displayed.

[Alisonispig]

OK, I'm trying to join the virtual list, which will really damage your previous design. If I succeed, will you accept PR?

[antoine92190]

If you succeed to add the virtual list without breaking the design and the scroll on web and mobile browser, sure I will accept the PR. If you manage to get a good result, I can also jump in and help on the PR.

[Alisonispig]

I want to change it based on the "Vue virtual scroll list" component, but at present, the most fatal thing is that some animation effects will be lost, which is irreversible, unless the "Vue virtual scroll list" component is modified. Is this acceptable.

[antoine92190]

I would rather not loose animations. You can still send the PR and see if we can do anything about it.

[Alisonispig]

OK, I'll do this after I've sorted it out

[Alisonispig]

Unfortunately, after about 10 hours of trying, I have made some progress, but not much Let's start with the progress:

1. I successfully embedded the virtual list and can scroll and refresh
2. I found the way to the top and bottom in the virtual list, which means that the manually set listening and scrolling positions can be solved together
3. The basic style is realized, and there is not much change, except for the loss of some animation

Question:

1. The slot has not found a good way to pass it in
2. Because the list is scrolling and refreshing, the "onmessageadded" event cannot be obtained
3. During the test, it is found that multiple picture messages (about 50) are initialized. If you continue to send more than the set number of active messages, scrolling up will automatically jump to the bottom

I need your help because my level is not professional I like this UI component, and you are a great author

You can get my latest progress and make suggestions through my cloning your project

[antoine92190]

Sure, I will check it. I just made an important update to the project, that would be nice if you could test it out, and update your PR using this new version: https://github.com/antoine92190/vue-advanced-chat/releases/tag/2.0.0 Otherwise, please open a PR and I will take care of the migration of your PR, it will be easier to work on it.