How Vue Keep Alive Can Improve Your App

Поделиться
HTML-код
  • Опубликовано: 14 июн 2021
  • When working with dynamic components, Vue recreates new instances of components when you switch the value of the :is directive. While it’s useful in most cases, there are times when we want to save the cached state of a hidden element.
    Meet Vue keep-alive components.
    Depending on your project, Vue Keep-Alive components can be a great way to increase speed and provide a better user experience.
    COMPANION ARTICLE W/ CODE
    learnvue.co/2019/12/an-overvi...
    FREE VUE 3 CHEATSHEET WITH ESSENTIAL CODE SNIPPETS
    learnvue.co/vue-3-essentials-...
    follow me on twitter:
    / mattmaribojoc
    🚨 Like quick Vue lessons like these? Check out 800+ lessons over on Vue School - go.learnvue.co/vueschool
    INTRO
    Daily (Prod. by Lukrembo)

Комментарии • 42

  • @youssefelshahawy8080
    @youssefelshahawy8080 3 года назад +19

    I highly appreciate the effort put into these videos and they are very informative, keep going my dude !

    • @LearnVue
      @LearnVue  3 года назад +1

      Glad you enjoy them! Thanks :)

  • @bonaventureokoli7988
    @bonaventureokoli7988 2 года назад +1

    wow, that was amazing, i hv been coding with vue for about 3 yrs now and i still found it very useful.

    • @LearnVue
      @LearnVue  2 года назад +1

      appreciate it!!

  • @vuenice
    @vuenice 3 месяца назад +1

    Otherwise we have to use store or Api to initialize data for those tabs. In particular case, I had heavy tabs with charts and form datepicker in loops, so heavy that it was hanging the browser in some case, hence there mounting one component at a time makes more sense.

  • @LDdrums20
    @LDdrums20 2 года назад

    I stumbled myself with this same issue today. Will use it!

  • @johnnybravohonk6964
    @johnnybravohonk6964 2 года назад +1

    Just on time :) I am creating a slideshow-like experience and swiching slides with . keep-alive should be a nice fit here.

  • @faezehkhadem6498
    @faezehkhadem6498 9 месяцев назад +1

    It's so useful, thanks

  • @lighty262
    @lighty262 3 года назад +3

    Great content, very informative and precise.

  • @draggingtheshutter
    @draggingtheshutter Год назад

    love the pace

  • @tormagabor9542
    @tormagabor9542 2 года назад +1

    Saved my day! Thanx!

  • @allaghi
    @allaghi 3 года назад +1

    Amazing and useful video as always 👌 thank you so much. I hope if you make a video about how to implement ssr with vue cli , I know I can use nuxtjs to make it easier but I would like to know the appropriate way with vue cli . Thanks in advance ☺

    • @LearnVue
      @LearnVue  3 года назад +1

      thanks for the suggestion! will definitely look into it more

  • @bakhtiyor_sulaymonov
    @bakhtiyor_sulaymonov 2 года назад +1

    thanks for the video

  • @ssahillppatell
    @ssahillppatell 3 года назад +2

    Useful. Nicely explained

  • @YellowPanamka
    @YellowPanamka Год назад

    very usefull, thanks

  • @centrumsaiyan7623
    @centrumsaiyan7623 2 года назад +1

    Amazing content

  • @devtiagofranca
    @devtiagofranca Год назад

    thank you, helkped me a lot

    • @LearnVue
      @LearnVue  Год назад

      Glad it helped! Keep Alive is a cool feature

  • @buncheedev5469
    @buncheedev5469 2 года назад

    I love this channel. So many greate vdo.

    • @LearnVue
      @LearnVue  2 года назад

      Thank you so much 😀

  • @ericpodhorecki5427
    @ericpodhorecki5427 2 года назад +2

    What's the reason for not using the composition API?

  • @kaandesu4881
    @kaandesu4881 Год назад

    thanks

  • @Troy-ol5fk
    @Troy-ol5fk 3 года назад +1

    could you make video about dynamic components , using tag ?

    • @LearnVue
      @LearnVue  3 года назад

      great suggestion! this video should be coming next week, but until then we have an article for that topic on our website. learnvue.co/2020/01/an-overview-of-vuejs-dynamic-components/

  • @captainalpha4853
    @captainalpha4853 2 года назад

    My man can explain rocket science in less that 5mins and still understand it very well. Thanks man!

  • @brunolobao5704
    @brunolobao5704 2 года назад

    DUDE! This is so damn usefull!!!!

  • @ukyo1541
    @ukyo1541 Год назад

    oh nice !

  • @ashutoshkaushik2133
    @ashutoshkaushik2133 Год назад

    im unable to do this in composition API :(

  • @codingwithsamanja8315
    @codingwithsamanja8315 Год назад

    IMO Vue JS is the best framework out there for conditional rendering of anything. keep-alive is for conditional caching and only works for component tag. Very cool video for basic understanding. In a real situation I had to use the keep alive for caching the date when people switched between tabs.

  • @hosseinpanahy5358
    @hosseinpanahy5358 11 месяцев назад +1

    Create more contents

  • @user-ho2vd7gc1o
    @user-ho2vd7gc1o Год назад

    keep-alive takes unclude and exclude . you should explain it in this video

  • @user-bd8sj3bn4v
    @user-bd8sj3bn4v Год назад

    1

  • @bartoszsowa5140
    @bartoszsowa5140 Год назад

    Listening to these tutorials while reading displayed text, which says the same, but in different way, is not very comfortable.
    Besides that, they are great.

    • @LearnVue
      @LearnVue  Год назад

      i agree - thats something i've been trying to do better in my more recent videos. thanks for the feedback!

    • @bartoszsowa5140
      @bartoszsowa5140 Год назад

      @@LearnVue anyway the content is great!

  • @aqordeon
    @aqordeon Год назад

    why RUclips auto translate this video to Dutch language?

  • @noipsend757
    @noipsend757 Год назад

    How can someone not love Vue!? if VueNative existed nobody would care about react.... (chill bro! i'm just messing with you)