Lazy rendering.

[vadimpopa]

I'm beginner in VueJs. I've been trying to optimize some 2 level nested tabs with subtabs that have at least 6 highcharts each one. Currently vue-tabs is lazy rendering, which is good for some scenarios, but thinking how to experiment if still doing lazy rendering but with render only once, so the active tab is not destroyed after transition so next time is not going to be rendered again. Any ideas ?

[cristijora]

@vadimpopa This can be achieved with https://vuejs.org/v2/api/#keep-alive

[vadimpopa]

Yes I saw that, but did a few experiments, haven't noted any difference. So according to you, in the following template where I should add it ?

<template>
  <div class="vue-app-wrapper">
    <vue-tabs>
      <v-tab v-for="(tab, i) in tabs" :key="i" :title="tab.name">
        <vue-tabs>
          <v-tab v-for="(subTab, j) in tab.subTabs" :key="j" :title="subTab.name">
            <div v-for="(type, index) in subTab.charts" :key="index">
              <chart class="Grid-cell" :query="tab.searchQuery" :type="type"></chart>
            </div>
          </v-tab>
        </vue-tabs>
      </v-tab>
    </vue-tabs>
  </div>
</template>

[cristijora]

Let's create a jsfiddle and start from there. Please Create one with your example and maybe put something else than charts and point what you want to cache.

[vadimpopa]

I'll work on it as soon as I'll get more time to play. I noticed that keep-alive is not working well with the v-for, especially in such tabs context. Caching worked but it rendered only the first tab.

[cristijora]

Let's start from here https://jsfiddle.net/b44cc4dq/87/

[vadimpopa]

Ok, see the screenshot, this is what I've got.

[cristijora]

Maybe I'm missing something but tabs are already kept in the DOM. Internally they use v-show to display content which sets display:none on the tab.
You can see that all tabs are present in the DOM but only one is visible. The rest have aria-hidden="true"
This also applies to sub-tabs so you might not need keep-alive at all. So

so the active tab is not destroyed after transition so next time is not going to be rendered again

Is actually true by default since tabs are rendered only once and they are present in the DOM

Maybe you can detail more on what the issue is exactly. Your chart get's destroyed and re-rendered? How do you know about that

[vadimpopa]

Yep, you missed pushing a new release with latest changes, and I missed as well this but only now noticed. The npm version is from 9 May, but that fiddle is working with the latests which has the 10 days ago changes. The npm version is working like with v-if.

[cristijora]

Oh ok. Thanks for pointing that out. I will try to do small releases with like 1-2 issues from now on so I don't encounter such situations later on. For now you can point to a github repo in package.json so you get the latest version or wait for the next release in 1-2 days.

[vadimpopa]

Nah, since yours is not going to have lazy rendering it's not suitable anymore for me. I've tested a bunch of libraries like vuetify , vue-material , only vuetify has lazy rendering on tabs (v-if instead of v-show). But besides lazy rendering I need the "render only once"/deferred rendering feature: so when the tab first is activated the content is rendered, next time when the tab is activated again the content should be in DOM already. This called "deferred rendering", ExtJS has this and works very well. I may need to implement the tabs myself with this feature.

Thanks tough for your help. Cu vreo ocazie daca ne vedem in oras, te servesc cu o bere, mi-ar face placere sa mai vb.

[cristijora]

Sure, putem vb joracristi@gmail.com. I will think over the issue and see if I can find some solution for that

[cristijora]

Ai incercat sa te uiti peste https://vuejs.org/v2/api/#v-once ?

[vadimpopa]

I have v-once, but is not helping much....anyways looks like vuikit (https://github.com/vuikit/vuikit) does deferred rendering, I haven't looked much into, just did a quick test.

[SSmJaE]

    @Prop({ default: true }) keepAlive!: boolean;
    @Prop({ default: true }) lazy!: boolean;
    loaded = false;

    render() {
        let loadContentFlag: boolean = false;
        let needToFigureIsActiveAndKeepAlive: boolean = false;

        if (this.lazy) {
            if (this.loaded) {
                needToFigureIsActiveAndKeepAlive = true;
            }
        } else {
            needToFigureIsActiveAndKeepAlive = true;
        }

        if (needToFigureIsActiveAndKeepAlive) {
            if (this.active) {
                loadContentFlag = true;
            } else {
                if (this.keepAlive) {
                    loadContentFlag = true;
                }
            }
        }

        return (
            <section
                class="tab-container"
                id={`p-${this.tabId}`}
                aria-labelledby={`t-${this.tabId}`}
                role="tabpanel"
                v-show={this.active}
            >
                   {loadContentFlag && this.$slots.default}
            </section>
        );
    }