Vue JS 2 Tutorial #23 - Primitive vs Reference Types

----- COURSE LINKS:

---------------------------------------------------------------------------------------------

========== PSD to WordPress Playlist ==========

============== The Net Ninja =====================

================== Social Links ==================

[SteveGreenwalt]

Look no further for the best Vue JS tutorial on the web. Clear explanations and excellent examples.

[t]

Very simple, clean, without overwhelming unnecessarily informations. Great work!

[abdulazeezolanrewaju]

Attention, future watchers... if you get this error:


"[Vue warn]: The data property "title" is already declared as a prop. Use prop default value instead.
found in
---> <AppHeader> at src/Components/header.vue
<App> at src/App.vue
<Root>"
Just make sure you don't return title in the data function again. That's basically what it's telling you. That the title is declared as props already, so don't declare it again in the data function.

[RohanMaheshwari]

Seen many a video around here, and you are a definitely a top-notch teacher. Thanks for these videos!

[kneeh]

Great tutorials, liked and subscribed !
Just a small note, Strings are reference types.
fixed bytes values (not including arrays) are primitives, for example integer (which is always 4 bytes in memory).
The reason this example did work, is because strings are also immutable,
meaning when you updated the string, you created a new one and updated the reference and not the actual value.
So after the update, there are two string reference, one to the updated, and one to the original (now there are two strings in memory).

[jelodev-jf]

How do we avoid this when dealing with reference types? Are we going to apply immutability rules like duplicating the array and storing it into another variable?
Btw, good tutorials bro! Keep it up! Subscriber since the early days of your channel!

[dominiclapitan]

Very simple yet so understandable explanation! Thank you!

[kerendn]

Your explanations are crystal clear. Brilliant.

[powerpoint]

Awesome .. It's the best courses I can find on youtube for now..

[yannmasoch]

Your videos are great and very well explained, I really enjoy them!
For this video, you could have shown how to pass the "title" as a Primitive or as a Reference to see the 2 different ways for the same data.

For example: title: "Vue Ninjas" vs title: { text: "Vue Ninjas" }

[sydneybecher]

nice tutorial man thanks
I am facing this warn when creating direct method in header
`Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.`

[Plokm]

Thanks a lot, This Tutorial is the best Vue JS tutorial ever!

[edwardkaminski]

Hey, man. First off, thanks so much for making this series. It's awesome and much appreciated. I did notice at about 5:50 that you added the "title" prop, but didn't remove the "title" data member from Header.vue. If they're named the same, do props take precedence over data members? Or did Vue happen to throw you an error in the console that we didn't see?

[لبنانيأصيل-صز]

Hello,
I'd like to submit a feedback. While reference types are generally object with content that can be changed, the real difference between the two examples is "re-assigning" the prop: If you change the content of a prop (e.g. modifying the content of an array or an object), it'll change the object it's referencing too, however if you re-assign the prop (i.e. props = something else), it won't change the value of the actual prop that was passed from the parent component. Therefore, even with an array, re-assigning the whole prop won't change the passed prop from the parent component.

[thanasisbalatsoykas]

if we all shared his videos he would start growing faster and get the views he deserves

[mohammadalongan]

I've got a warning " [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "title" "

[pasizdobrekuce]

You sound like Brian Cox. Which is brilliant because he's probably the greatest science communicator ever.

[VitaliiBahmet]

Great clean tutorial! Many thanks, mate!

[timgehrsitz]

If you're watching this and using TS and wondering how to fix the "this.items.pop();" giving an error, use "this.$props.items.pop();"

[arefmaleki]

I am really enjoying this tutorial. Thanks for such a great training.

I've got a question: how can I change the title back to the original after clicking on changeTitle in "<h1 like a toggle.

Thanks