Тёмный

Vue 3 Reactive Data | Ref Vs Reactive in 10 Minutes! (ish) 

John Komarnicki
Подписаться 22 тыс.
Просмотров 19 тыс.
50% 1

Опубликовано:

 

29 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 42   
@JohnKomarnicki
@JohnKomarnicki 2 года назад
Now that Vue 3 is the official version of Vue, is there any other topics / features you'd want me to cover?
@caiovinicius7871
@caiovinicius7871 2 года назад
Amazing content, John. My suggestion is the Basic of unit tests with vitest. God bless you!
@JohnKomarnicki
@JohnKomarnicki 2 года назад
@@caiovinicius7871 I was actually having some conversations with individuals this week about this topic. This is definitely something id love to cover!
@caiovinicius7871
@caiovinicius7871 2 года назад
@@JohnKomarnicki Great! Im anxious 😀
@badasscoder4481
@badasscoder4481 2 года назад
How to create plugins in vue 3.
@JohnKomarnicki
@JohnKomarnicki 2 года назад
@@badasscoder4481 like an npm package?
@abdulrakib9906
@abdulrakib9906 2 года назад
Please create a complete e-commerce project(home page, category page with filter system, product page, cart page etc), with all features using firebase. Obviously based on vue 3. Hope to see you soon with this project.
@dasten123
@dasten123 2 года назад
Sigh! This video started promising but well.... yepp, that's what everyone says: "There are situations when using reactive instead of ref is a good choice". But nobody wants to show me these situations. So far, since I really don't think having to write .value is such a bad thing, I only see downsides of using reactive. I can't think of _any_ reason to use it at all and I can't think of or find an example where it actually does something that ref doesn't do.... :( This is very frustrating! I want to know why it exists! It can't be just to omit .value, can it??
@JohnKomarnicki
@JohnKomarnicki 2 года назад
I explained a few reasons, primiate values, resassinging, etc. it’s more situational. I personally mainly only use refs actually in my applications
@dasten123
@dasten123 2 года назад
@@JohnKomarnicki Every drawback you mentioned, like the limitation with primitive values and reassigning, are drawbacks to *reactive*, But I'm looking for drawbacks to *ref*, apart from having to write `.value`. My point is that I just don't understand why `reactive` exists, because saving these 6 characters can't be the reason. Or is that actually it? I feel like I am missing something here :/
@JohnKomarnicki
@JohnKomarnicki 2 года назад
Ref were actually created to address the limitations for reactive. Obviously things like having to append .value is tedious, but again, that’s a very opinionated discussion
@dasten123
@dasten123 2 года назад
@@JohnKomarnicki Okay, then let me re-phrase my question: Why do people use `reactive` if `ref` can do everything that `reactive` can do, plus more? Is it just to not have to write `.value` or is there something I am missing?
@invictuz4803
@invictuz4803 2 года назад
@@dasten123 Right on, this was exactly my frustration when researching the answer for this after the official docs left me confused. Unfortunately for people like us that can't accept doing things one way over another without fully understanding why, we'll just have to understand how each of those works under the hood and make our own conclusion. Or, it could actually just be to avoid typing ".value". Either way, it's very short-sighted of the official docs to not explain why they've provided us with two similar options. Proxies are used for reactive objects and getter/setters are used for refs. I've read in one article that reactive() tracks each property of the object separately whereas ref() tracks the entire object so anytime a single property is updated, all subscribed effects/updates (for all properties) are triggered. So, it could be a performance thing. I don't actually know if this is true though as I haven't got around to testing it or digging deeper into how it works under the hood.
@clasesutnfrc8699
@clasesutnfrc8699 Год назад
01:19 setup tag
@epotnwarlock
@epotnwarlock Год назад
What I hate about Vue: examples dont use and it's never in Typescript Btw i like the video
@despertaweb4793
@despertaweb4793 Год назад
You're stating a very important point here, often missed: "Reassigning objects is possbile with Ref." That means you can destructure an object into a reactive REF one and bulk in there the props with it's values. Also alows to add new ones!
@universecode1101
@universecode1101 2 года назад
Composition Api is great, I'm learning Vue.js 👍🏻 Nice John 😄
@JohnKomarnicki
@JohnKomarnicki 2 года назад
Thanks! 😀
@dj78productions
@dj78productions Год назад
Isn't the error you're getting at 11:35 because personTwo is defined as const? Would you still get that error if you define personTwo with let instead of const?
Год назад
yes it is, but you cannot reassign reactive property otherwise, you will not receive error, but it will not update
@chatif1476
@chatif1476 2 года назад
John please make some more vue3 firebase9 🔥 tutorials
@badasscoder4481
@badasscoder4481 2 года назад
Firebase 9 is not difficult. I think you must 1st watch fireblog 6 hours video from Sir John Kommm... . That will surely help you to understand how firebase does work. Like how to use cloud functions. And he is using firebase 8.
@amitdev1485
@amitdev1485 Год назад
Vuejs3 best practice for properly building a project..
@devhub-in-th
@devhub-in-th 7 месяцев назад
Great explanation, thanks so much :)
@shellysclan1901
@shellysclan1901 Год назад
please explain what is proxy and why we get value as proxy instead of object
@MRR0GERS
@MRR0GERS 2 года назад
@John Komarnicki you can infact reassign values of an object that was declared with reactive. `Object.assign(target, object)` will either add a nonexistent property or update the value of an existing property.
@JohnKomarnicki
@JohnKomarnicki 2 года назад
According to most of the documentation I read prior to creating this video, this was not the case. Maybe we are crossing the idea of reassigning. But In the example within the video, you can’t re assign a completely new object to that variable
@MRR0GERS
@MRR0GERS 2 года назад
@@JohnKomarnicki I think I see what you're saying. Setting an object declared with reactive as a completely new object no but you can add existing property with "obj. = value" or add it in during an "Object.assign(target, obj)".
@JohnKomarnicki
@JohnKomarnicki 2 года назад
@@MRR0GERS yes! That’s exactly what I mean!
@MRR0GERS
@MRR0GERS 2 года назад
@@JohnKomarnicki 👍. Yeah it took me a bit to figure out how to effectively update the object in mass instead of each property at a time and found somewhere that using Object.assign(target, obj) will update the matching properties in the target object with the values in the second or add them into the target if they don't currently exist. If you need to remove a property instead of updating the value you can use "delete obj.prop" to remove it from the object.
@yeikiu
@yeikiu Год назад
@@JohnKomarnicki it'd fail anyway as you were trying to reassing a const
@jampy42
@jampy42 2 года назад
I would like to know how to work with async func passing props between components :D
@umahatokula9586
@umahatokula9586 Год назад
Build a dApp using Nuxt3
@logozgur
@logozgur Год назад
Use reactive for performance.
@gaurangdodiya-yc1pe
@gaurangdodiya-yc1pe Год назад
Hey i am From India. Please teach Vue Js Full Courses.
@JohnKomarnicki
@JohnKomarnicki Год назад
I do have a crash course on Vue 3 you can watch here ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KTFH4P8unUQ.html
@ihorlevit5369
@ihorlevit5369 6 месяцев назад
thanks!
@khashayarshomali
@khashayarshomali Год назад
Amazing 👌
@cswalker21
@cswalker21 2 года назад
Cool, thanks, this clears things up.
@JohnKomarnicki
@JohnKomarnicki 2 года назад
Awesome, glad it could Chris!
Далее
荧光棒的最佳玩法UP+#short #angel #clown
00:18
Новый вид животных Supertype
00:59
Просмотров 193 тыс.
Build your own Custom Composables in Vue
12:13
Просмотров 42 тыс.
Understanding Vue 3 Internals: @vue/reactivity
20:52
Просмотров 2,3 тыс.
This Is Why Python Data Classes Are Awesome
22:19
Просмотров 807 тыс.
Avoid losing Reactivity in your Vue Application
10:32
The Difference Between Vue and React
10:27
Просмотров 37 тыс.