refactor(vue): optimize reactivity handling and reduce bundle size

[negezor]

Hello, I accidentally came across your module and, after looking at the source code, I really liked it. I would like to thank you for it.

While examining the Vue implementation, I noticed a few areas for improvement. Here is the list:

1. Use shallowRef instead of ref. It is standard practice to use it for HTMLElement and heavy objects that do not require reactivity. We just need to observe the value setting in this case.
2. Use simple variables to store storedOptions and storedPlugins that do not need reactivity. After all, we only add watch for Ref objects.
3. The first two improvements also slightly reduce the minified bundle size, as we only call isRef once and remove unnecessary accesses to .value.

[davidjerleke]

Thanks for your contribution @negezor.

1. Use shallowRef instead of ref. It is standard practice to use it for HTMLElement and heavy objects that do not require reactivity. We just need to observe the value setting in this case.

Thanks. Makes sense 👍.

2. Use simple variables to store storedOptions and storedPlugins that do not need reactivity. After all, we only add watch for Ref objects.

I'm not following here. Options and plugins should be reactive. Whenever options or plugins change, the carousel should re-initialize. Or am I misunderstanding what you mean by this?

3. The first two improvements also slightly reduce the minified bundle size, as we only call isRef once and remove unnecessary accesses to .value.

Thanks!

[negezor]

I'm not following here. Options and plugins should be reactive. Whenever options or plugins change, the carousel should re-initialize. Or am I misunderstanding what you mean by this?

Options and plugins will be reactive. We don't just need to store them in a reactive variable, because we only listen for changes to the passed arguments.

[davidjerleke]

Options and plugins will be reactive. We don't just need to store them in a reactive variable, because we only listen for changes to the passed arguments.

@negezor thanks for clarifying. I think this is a nice refactor of the Vue wrapper so great work 👍🏻. Have you tested the wrapper with your changes?

@meirroth and/or @sadeghbarati would you like to skim the code and add anything?

[negezor]

@negezor thanks for clarifying. I think this is a nice refactor of the Vue wrapper so great work 👍🏻. Have you tested the wrapper with your changes?

@davidjerleke yes. I used the fork of version 8.1.5 with these changes on my stage, as well as later on in production.

[sadeghbarati]

Using shallowRef is LGTM 👌

[meirroth]

Looks good, thanks 👍

[davidjerleke]

Just tag me here when this is approved @meirroth and @sadeghbarati. Thanks 🙏🏻.

[sadeghbarati]

@davidjerleke done 😄

[davidjerleke]

Thanks everyone for your improvements/contributions and taking time to review this PR 🎉. I will merge it soon.

I’ll make sure to drop a comment here when it has been released in v8.1.7.

[meirroth]

Looks good 👍 Tested in my project and works fine.

[davidjerleke]

Will be included in the v8.1.7 release.

[davidjerleke]

@negezor, @sadeghbarati, @meirroth these improvements were just included in the v8.1.7 release.