The definitive guide to shallowRef in Vue

Поділитися
Вставка
  • Опубліковано 24 січ 2025

КОМЕНТАРІ • 34

  • @epiphanyatnight8732
    @epiphanyatnight8732 Рік тому +6

    Love these videos and all your blog posts Alexander. They are just right for people like me who already learned the basics of Nuxt but needs to learn about best practices and more advanced concepts. Please keep these coming!

    • @TheAlexLichter
      @TheAlexLichter  Рік тому +2

      Thank you so much! That is exactly why I started these videos. There is so much beginner content but intermediate/advanced is scarce. I hope to change that 🙌🏻

  • @hangor3620
    @hangor3620 Рік тому +1

    Another great video!
    Love the delivery, short and straight to the point

  • @Evelynbbb
    @Evelynbbb Рік тому +3

    Thank you so much, you explained it so well. I read the documentation and I didn't understand what it meant until I watched your video on it

  • @heunsigjo7484
    @heunsigjo7484 Рік тому +2

    This video is awesome and so easy to understand. Thank you

  • @mahdirashidi5104
    @mahdirashidi5104 3 місяці тому

    thanks a lot , you mention good tips,do you have any idea for transforming data in vue3 or nuxt 3or nuxt4??

  • @AnassSanba-f5d
    @AnassSanba-f5d Рік тому +3

    Please talk about hydration miss match in nuxt thank you!

    • @TheAlexLichter
      @TheAlexLichter  Рік тому

      Actually I’ve written an article some years ago about it! www.lichter.io/articles/vue-hydration-error/
      But I’ll make sure to update it to Nuxt 3 in the future 👌🏻
      And then maybe a video too 👀

  • @Zemus777
    @Zemus777 Місяць тому

    Performance is mentioned as the reason to possibly use shallowRef. But what about escaping the ref unwrapping of nested refs?
    It is a frustration of mine that if I have an array in a ref with objects that in turn contain refs, the type of those objects are no longer their original types but unwrapped ones. So typescript will complain when I try to push another object of that type as the ref properties are unwrapped and the signature no longer matches. With shallowRef I can skip that, but need extra care when I add/remove objects to the array. The other approach I've tried is going full reactive. Is there a better way to deal with this while still using refs?
    Common scenarios where I encounter this is when I deal with tree structures where at least some fields on the nodes need to be reactive. For example expanding/collapsing a subtree.

  • @nangseakheng2976
    @nangseakheng2976 Рік тому +1

    Great topic

  • @jacobandrewsky
    @jacobandrewsky Рік тому +1

    Great quality content there! 🚀

  • @shakur_t
    @shakur_t 7 місяців тому

    keep creating these videos Alex we need these :D

  • @emref-s7k
    @emref-s7k 4 місяці тому

    great video alex ty

  • @jatinkumar7287
    @jatinkumar7287 2 місяці тому

    It'd have been great if u could show case how much improvement someone can get doing this change as showing changes for 1000 line of json vs 10 line of json or maybe 10k line of json. It can help distinguished between whether people should go ahead change all their to shalowref when needed.

  • @deaddoomed2380
    @deaddoomed2380 Рік тому

    this help me a lot, I've forced to use shallowRef passing a component to a router-view

  • @rayan_azzam
    @rayan_azzam Рік тому +1

    Thank you for those valuable information, i will mange to use it with my api calls.
    But the question is when we will start feeling about performance degradation ?
    I mean how many refs we could use before getting a performance issue?

    • @TheAlexLichter
      @TheAlexLichter  Рік тому

      You are welcome!
      Sadly you can't give a one-fits-all estimate for this scenario. It highly depends on the data you are dealing with (e.g. how big / nested) and the operations you perform 😊
      But in general I'd suggest using the "right tool" for the job, e.g. when you know data will be only replaced, use a shallowRef 👌

    • @rayan_azzam
      @rayan_azzam Рік тому +1

      @@TheAlexLichter
      Is there any way to have a paid workshop with you, i am trying to use clean architecture using vue and nuxt, and i have some concerns about my approach of using states and other layers 😅😅

    • @TheAlexLichter
      @TheAlexLichter  Рік тому

      @rayanazzam7225 There is! Go to my website and schedule a meeting or write me an email 👌🏻
      www.lichter.io/

  • @rahman9418
    @rahman9418 Рік тому +1

    hello I want to ask how do I become proficient in front end, I have learned javascript and typescript on Udemy, the focus is on the vue ecosystem and if I can do full stack by relying on nuxt, I've been almost 2 years and still think I can't do anything and still I don't have a single project yet, I'm asking for your advice because I'm confused, Sorry I vented here, I just wanted to ask for your opinion

    • @TheAlexLichter
      @TheAlexLichter  Рік тому +1

      Hey ✌
      IMO the best way to grow more is by doing a project. That can be something like a personal portfolio, a fun app to make your daily life easier or an open source project.
      Courses for JS, TS + Vue in the beginning help a lot, but at some point you need "real-world" experience 😊
      Also, by doing a few "smaller" projects, it is easier to apply too, especially because you can open source them as well, showing that you have some experience.
      Hope that helps 😋

    • @rahman9418
      @rahman9418 Рік тому

      @@TheAlexLichter i love it thank you

  • @turboruninc
    @turboruninc Рік тому +2

    hi alexander, can you contribute to nuxt docs? please revise data fetching, you wrote data fetching best practices in nuxt. Honestly playing with API in react is easier than vue (nuxt). Maybe Daniel Roe could also help, revise together.
    I'm still confused about the best and correct way to use REST/GraphQL on nuxt. The point is related to the API

    • @TheAlexLichter
      @TheAlexLichter  Рік тому

      Thanks for the comment! The topic is quite broad but I see what I can do. I am a (somewhat) regular docs contributor and will have a look 🙌🏻

  • @yunusemrefersiz2848
    @yunusemrefersiz2848 7 місяців тому

    Ty