Vue 3.3.0 NEW defineModel Will Change How You Write Vue Code!

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ส.ค. 2024

ความคิดเห็น • 54

  • @ProgramWithErik
    @ProgramWithErik  ปีที่แล้ว +2

    Hey! Want to get a free cheat sheet from me, and I'll let you know when I go live? Sign up here -> bit.ly/3Umk7sW

  • @codybontecou
    @codybontecou ปีที่แล้ว +10

    Ooo, this is actually a huge upgrade. I've always found the emit + prop strategy to be a hassle.

  • @mohammadkhayata2042
    @mohammadkhayata2042 ปีที่แล้ว +4

    Thanks Erik !
    can you explain Generic Components ( new incoming Feature in v3.3) plz

  • @Mikenight120
    @Mikenight120 ปีที่แล้ว +1

    Hey Erik, love your content. FYI, don't know if your aware but this month is the launch of the Vue Official Developer Certifications. Would love to see you cover it on the channel.
    My company even saw it and was very happy as they want employees to get certified in the technologies we use and gain more experience so I hope this is a big stepping stone in maturity for the framework as many others don't have this.

  • @daniel_dumile
    @daniel_dumile ปีที่แล้ว +2

    I've been using Vue for 3yrs and I didnt know you could use v-model like that, even though I've used v-model via libraries a million times 😂

  • @svenyboyyt2304
    @svenyboyyt2304 ปีที่แล้ว +1

    This is actually really cool. I always thought v-model on components was really cool, but the current way is just weird. Can you make more videos on this kinda stuff?

  • @antoniogiroz
    @antoniogiroz ปีที่แล้ว +2

    it would be great if you upload more videos about new features in version 3.3, like generic components or new methods like toValue

  • @meggi8048
    @meggi8048 ปีที่แล้ว +2

    3:54 why do you use ref() with a object for your state obj? i think reactive fits that use case more like:
    const state = reactive({count:0});
    also you do not need to use state.source when accessing it within script block.
    ref() is for primitive values, and for objects reactive() . reactive() does not need use of .value

    • @DimitryKudryavtsev
      @DimitryKudryavtsev ปีที่แล้ว

      Agreed. Reactive would be better on {count:0}. Ref just on a primitive value would work as well. Still a cool feature maybe for some more complex code.

  • @anuj7286
    @anuj7286 ปีที่แล้ว +3

    Which theme are you using for vs code?

    • @pacersgo
      @pacersgo ปีที่แล้ว +1

      SynthWave '84

  • @lighty262
    @lighty262 ปีที่แล้ว +1

    What about drawbacks of using defineModel vs using emitters?

  • @mostafa-li2pu
    @mostafa-li2pu ปีที่แล้ว +1

    i love your setup.
    mind sharing the details ?
    icons set, theme, etc
    or what do you think makes a setup great or better
    thank you!!

    • @ProgramWithErik
      @ProgramWithErik  ปีที่แล้ว +1

      I really need to add a /uses, but it's Synthwave 84, and FireCode!

  • @mardix
    @mardix ปีที่แล้ว +3

    Can we get one way and go with it? This is creating so many inconsistencies in teams.
    It feels like, while those are there to make it easier, but Vue is getting worse.

  • @user-uf7vz8sr5m
    @user-uf7vz8sr5m 8 หลายเดือนก่อน

    Wow this is amazing feature

  • @canardeur8390
    @canardeur8390 ปีที่แล้ว

    Thank you. Looks promising.

  • @reagandesigns6432
    @reagandesigns6432 ปีที่แล้ว

    Nice!! Do you have a tutorial of your boiler plate setup after you created the component? vbase 3

  • @alcrabie
    @alcrabie 2 หลายเดือนก่อน

    Hi ,how to use it in option api

  • @gabrieliuspocevicius5583
    @gabrieliuspocevicius5583 ปีที่แล้ว

    I never really liked the emit way. This is a great improvement.

  • @SXsoft99
    @SXsoft99 ปีที่แล้ว +1

    i know that you might consider it's a "best practice" but can you write your code without typescript?

  • @markokarzic8617
    @markokarzic8617 ปีที่แล้ว +1

    I love that color theme, can you share the name?

  • @mehmetilhan6083
    @mehmetilhan6083 ปีที่แล้ว +1

    It always seemed strange to me that props were readonly. It was great that it became an option.

    • @svenyboyyt2304
      @svenyboyyt2304 ปีที่แล้ว +1

      Well I always thought it made sense they were readonly, but now I just realised that it would make way more sense if every prop was bidirectional and instead of v-model on an input, you could have a two way binding of the prop value.

    • @heroe1486
      @heroe1486 ปีที่แล้ว

      They are just for primitives, not here since it's an object, mutating the prop in the child would have worked just fine

  • @Vietnamkid1993
    @Vietnamkid1993 ปีที่แล้ว +2

    What the advantage of this compared to passing a reactive value in from provide/inject and modifying it in the child?

  • @ropodl
    @ropodl ปีที่แล้ว

    I like it, don't have to make emit to change modelValue

  • @codedjango
    @codedjango ปีที่แล้ว

    I assume this is a typescript only macro....will this affect the programmers who do Vue 3 with pure javascript?

  • @trynio132
    @trynio132 ปีที่แล้ว

    It's not anit pattern, when we can change prop in child component? In this case (defineModels) it's look like a anti pattern

    • @ProgramWithErik
      @ProgramWithErik  ปีที่แล้ว

      Well your adding a v-model, that’s why it is ok

  • @hixday93800
    @hixday93800 ปีที่แล้ว

    For some reasons I can't get to find defineModel informations in the vuejs doc :/ Possibly because it is still an alpha feature ?

    • @ProgramWithErik
      @ProgramWithErik  ปีที่แล้ว +1

      It was just relased, and it's experimentail. You have to add in a script tag into your vite.config vue() plugin for it to work.

    • @hixday93800
      @hixday93800 ปีที่แล้ว

      @@ProgramWithErik Thank you

  • @LA-fb9bf
    @LA-fb9bf ปีที่แล้ว

    I am confused. Isn't that already available since Vue 2? Model binding is not new

  • @alauddinafifcassandra9965
    @alauddinafifcassandra9965 ปีที่แล้ว

    coolll...

  • @bafian
    @bafian ปีที่แล้ว

    nice

  • @SebastianPerezG
    @SebastianPerezG ปีที่แล้ว +5

    This is what hate about some of this frameworks , they change everything..

    • @Kingside88
      @Kingside88 ปีที่แล้ว +4

      the way how you did it before still works. This feature just extends and simplify

    • @canardeur8390
      @canardeur8390 ปีที่แล้ว +1

      This is what I hate about IT, they change everything everyday...

    • @Kingside88
      @Kingside88 ปีที่แล้ว +1

      @@canardeur8390 politician do the same 😁

    • @canardeur8390
      @canardeur8390 ปีที่แล้ว

      @@Kingside88 True

    • @hixday93800
      @hixday93800 ปีที่แล้ว +1

      Web developpement always been evolving and moving very fast, you gotta adapt and stay up to date or you gonna find yourself outdated. This is just how it is

  • @johnnyw525
    @johnnyw525 2 หลายเดือนก่อน

    Skip the nonsense. The discussion starts here: 3:08