JavaScript Reactivity Explained Visually

[@tkdevlop]

It's make sense finally it make sense

[@danielgilleland8611]

The sheer quality of this video is wonderful! I have to ask, how long did it take you to make this video? Viewers would better appreciate the huge effort that goes into a 15 minute video.

[@VueMastery]

Glad you like the video! We devote a lot of time to ensure we are creating the best quality, best explained videos out there. In total, producing this video took about two weeks.

[@atRonan]

Vue Mastery Thank you for such a brilliant explanation of reactivity it definitely shows!

[@suraiyaaysha]

@@VueMastery You are just awesome!!! We like you so so so so..... much. You just save our time. In general, make a video 1 or 2hours but we didn't understand anything. But you make a video maybe it's 10 or 12 minutes but we understand it very greatly. We are really pleased to you. Thank you so much for making such kind of awesome platform for learning easy. God bless you.

[@daltonyon]

Everyone that use vue must watch this class!

[@dileepmaurya7229]

finally, I got someone who explained reactivity ecosystem in simple term

[@roguebitdev]

I really appreciate the effort that went into making these really awesome videos. It's hard to find quality content that explains the core concept of like this. Thanks again.

[@atmospheric_b]

That animation and the quality of explanation is god like. Thanks!

[@longingheart77]

Thanks for those videos sir, I highly appreciate your work. Vue is just phenomenal, I work with laravel mostly and wanted to provide some reactivity to my front end. React and angular has just turned me off, where as vue "clicked" in my brain straight away

[@ga28gx]

Thank you! I'm reading vue source code recently and this video helps a lot!

[@4ortson]

so i looked at the finished example 13:08 for a long time and i have a question. isn't the watcher function redundant?

[@kroniqque]

Thanks for this great explanation.🙏

[@andresalcaino7570]

Advanced componentes, a great course for learning about reactivity

[@anoopisaac]

Awesome elegant explanation.Good work sir

[@mohammadmahdialvansaz8001]

perfect explanation. thanks

[@bs00717]

maan it is the best way to explain🔥🔥🔥

[@fangao9977]

This is just amazing, very clearly explained, layout of the code, progressive layers, animations, highlights…everything, I can for sure be a better programmer if I learn new things with this kind of quality tutorials. Would I know is there any other videos like this or do you have a channel ? Thanks a lot !

[@JurajPecháč]

What Vue.js do under the hood? Why can we write only this.prop and not this.data.prop? Can you explain it in video?

[@朋飞杨-w9w]

Juraj Pecháč just proxy this.prop to this.data.prop.

[@JurajPecháč]

in video: record: save this code inside the target I think correct is: record: save this code inside the storage

[@hamzabenkhaldoun]

Thanks for the video. It explains some things but still having the dep class rely on a global target being there is kinda counter intuitive. Maybe pass the target as a param to the dep method, so i's clearer and you don't have to make those target = () => { ... } ; dep.depend();

[@antoniomiranda7472]

Agree, can be tricky to understand where that target comes from ... 5:52 it's hard to tell how works. If the class was declared in a different file it wouldn't work.

[@equals5StaR]

Ok I dont get from where are you getting "target" inside class Dep - depend() method when you are not passing anything to the method

[@vladimiroscolcov1163]

The answere is in the "watcher" functions. When "watcher" is called it sets the target, then calls that target, that target is the callback that accesses the data.price & data.quantity. These trigger the getters of respective properties in data objects, in those getters you have other dep instances that call their own .depend() methods, and at that very moment target exists in the outer scope as that callback.

[@andychung6877]

Thanks, really awesome

[@xamael1989]

It's a really good video thank you sir

[@harshskulshrestha1915]

This is an amazing explanation, thank you! I have a followup question on this: Does this reactivity apply to objects as well? From what I know, vue is able to detect changes within an object's property and re-renders the component. I was wondering how? The setter/getter of the object wouldn't be called, as we aren't changing the object's reference.

[@heybudi_]

Damn, pretty good explanation!! Subscribedddd!! Thank you!! ❤️❤️❤️❤️

[@bohdanafanasyev3642]

Amazingly explained, thank you good sir :)

[@rthangam77]

Awesome thanks for the detailed explanation

[@YevhenUzhva]

Isn't it just a improved flux princip for specific needs?

[@giullianopaz8262]

WOW! Thanks for that amazing video. What's the software you use to make that animations?

[@VueMastery]

We use Keynote for all the animations.

[@vipulbhardwaj950]

Can someone link to the next video where we talk about reactivity in Vue code. This was a great learning, thank you so much for making this

[@VueMastery]

Hey Vipul. The next lesson is within our Advanced Components course over on VueMastery.com: www.vuemastery.com/courses/advanced-components/the-introduction

[@YevhenUzhva]

8:43 - let's use some Machine Learning in that case insdeat of if/if/case/forEach - that's is how we do it. P.S: joking... Just there is tricky logic for getters/setters which is requried for JS 'Reactivity'.

[@trojan606]

i love this

[@sanchitcop19]

Subscribed!

[@NZGoldvisa]

👍

[@jasonsysu]

awesome v

[@JamesMarks]

IMO "hipster syntax" is leaving out semicolons.

[@rafadydkiemmacha7543]

This is very confusing explanation of a simple pattern. You should have started from Object.defineProperty instead of juggling these globals without context before.