Vue 3.3.0 NEW defineModel Will Change How You Write Vue Code!
Vložit
- čas přidán 27. 07. 2024
- Get a free chapter of my book, and I'll let you know when I go live! bit.ly/3Umk7sW
With Vue 3.3.0 a new experimental macro defineModel was released. Is it better then v-model, let's take a look at how it works!
👉Check out my last video on UnoCSS
• Is Tailwind CSS No Lon...
👉 Join this channel to get access to perks:
/ @programwitherik
👉 Sign up and get free Vue cheat sheets and updates!
www.vuecourse.tech
👉 Need some help with a project, level up your skills, Vuetify or Nuxt bug? Check out my 1-on-1 mentoring!
mentors.to/erik
Follow me!
/ erikch
Links:
github.com/vuejs/core/pull/8018
vue-macros.sxzz.moe/macros/de...
0:00 What is defineModel
0:45 How to use defineModel today
01:17 Vue Macros setup with defineModels
03:08 Setting up MyChild with current way of handling v-model components
06:23 Converting to defineModels
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
Ooo, this is actually a huge upgrade. I've always found the emit + prop strategy to be a hassle.
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.
Thanks Erik !
can you explain Generic Components ( new incoming Feature in v3.3) plz
Thank you. Looks promising.
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?
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 😂
Nice!! Do you have a tutorial of your boiler plate setup after you created the component? vbase 3
it would be great if you upload more videos about new features in version 3.3, like generic components or new methods like toValue
I'll look into it!
What about drawbacks of using defineModel vs using emitters?
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
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.
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!!
I really need to add a /uses, but it's Synthwave 84, and FireCode!
i know that you might consider it's a "best practice" but can you write your code without typescript?
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.
I never really liked the emit way. This is a great improvement.
Hi ,how to use it in option api
I assume this is a typescript only macro....will this affect the programmers who do Vue 3 with pure javascript?
Wow this is amazing feature
It is nice!
I like it, don't have to make emit to change modelValue
Which theme are you using for vs code?
SynthWave '84
I love that color theme, can you share the name?
Synthwave 84
It always seemed strange to me that props were readonly. It was great that it became an option.
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.
They are just for primitives, not here since it's an object, mutating the prop in the child would have worked just fine
It's not anit pattern, when we can change prop in child component? In this case (defineModels) it's look like a anti pattern
Well your adding a v-model, that’s why it is ok
For some reasons I can't get to find defineModel informations in the vuejs doc :/ Possibly because it is still an alpha feature ?
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.
@@ProgramWithErik Thank you
I am confused. Isn't that already available since Vue 2? Model binding is not new
Not defineModel
@@ProgramWithErik v-model
nice
What the advantage of this compared to passing a reactive value in from provide/inject and modifying it in the child?
coolll...
Skip the nonsense. The discussion starts here: 3:08
This is what hate about some of this frameworks , they change everything..
the way how you did it before still works. This feature just extends and simplify
This is what I hate about IT, they change everything everyday...
@@canardeur8390 politician do the same 😁
@@Kingside88 True
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