Common Mistakes in Vue js and How to Avoid Them - Daniel Kelly

[@andredasilva6807]

whats the vscode theme? look great

[@jored56]

In that last mutating props example, wouldn't _data be initialized only once, so once u pass that object up to the parent (and the parent doesn't clone it), you'll end up still mutating the same object? 23:59

[@praveshishere]

yes, _data would only be initialized once and in order to overcome that you would have to watch data prop and update _data correspondingly (which would also result in either losing all the changes child component made or patching those changes on the new data received from parent based on your design), when we emit _data to parent, if the parent has used a ref, it would be easily updated no issues with that, though I am not sure what would happen in case if was created using reactive (since I only use refs)

[@luatthaivan6449]

is cloning the object will make some performance issues if the object is complex or have function properties ?

[@bishowpandey453]

Yes

[@apglazkov]

20:37 - "Hydration mismatch" - even in a single file tutorial example 😅 If a developer can make a mistake so easily, it means there is something wrong with the platform itself. Meanwhile, Vue.js developers still can't stop smiling in all their videos, feigning happiness 😂 "This is fine" 🔥🐶🔥

[@caiomendes4170]

SSX is a good game! I used to play SSX on Tour in my golden years,

[@taunado]

Epic game, man's got good taste

[@tropicaljupiter]

I use reactive like const state = reactive({ thing1: ‘defaultValue’, thing2: -1 )}; In other words, I use it to group state together. Don’t show me 10 lines of individual refs for a small form, just make a reactive formState object.

[@MrJloa]

Yep. That's what i do. Always use reactive and make a context like reactive({ posts:[], pageId:1 }) U can now easily reassign posts, also u can pass around the reactive context and u don't have those zillions of refs defined and that crappy ".value" which just looks ugly af.😂

[@dannjohnrem]

Wow, you’re amazing! How can I be as incredible as you?

[@Figurum]

awesome🎉

[@MrJloa]

Just to point out. The most ugly thing done bad in vue3 is refs which reference the dom. I got no idea why evan made it so bad, whereas the perfect solution was so obvious -- just introduce $ref() for dom refs. Why? const foo = ref(null). What is foo at runtime? A number? Boolean? Collection? U never know. U need to check the template part to be sure. And if that's a dom element, u now can't use the name 'foo' coz it's reserved coz of the ref name. Looks like bs. A proper implementation would be: const notFoo = $ref('foo') const foo = ref(1) Now i see that notFoo is a dom reference, which references a ref=foo element, moreover that attribute doesn't pollute my code (doesn't restrict me from naming smth foo in my code) It seems like evan was drunk while he was implementing dom refs in vue3

[@MrJloa]

It gets even worse when u review a lot of code on the browser (gitlab/github). This really pisses me off. We even made conventions addressing this annoying vue3 thing. Btw vue2 had a much better implementation

[@najlepszyinformatyk1661]

Totall basics. nothing interesting

[@someoneelse5005]

I have no idea what you would expect from common mistakes in a video, they are common for a reason

[@baraa7869]

@@someoneelse5005 true af 🤣