No video

JavaScript Reactivity Explained Visually

  Рет қаралды 31,036

Vue Mastery

Vue Mastery

Күн бұрын

Пікірлер: 43
@tkdevlop
@tkdevlop 6 жыл бұрын
It's make sense finally it make sense
@danielgilleland8611
@danielgilleland8611 6 жыл бұрын
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
@VueMastery 6 жыл бұрын
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
@atRonan 6 жыл бұрын
Vue Mastery Thank you for such a brilliant explanation of reactivity it definitely shows!
@suraiyaaysha
@suraiyaaysha 4 жыл бұрын
@@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.
@longingheart77
@longingheart77 6 жыл бұрын
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
@dileepmaurya7229
@dileepmaurya7229 5 жыл бұрын
finally, I got someone who explained reactivity ecosystem in simple term
@daltonyon
@daltonyon 2 жыл бұрын
Everyone that use vue must watch this class!
@focusxero337
@focusxero337 4 жыл бұрын
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.
@fangao9977
@fangao9977 4 жыл бұрын
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 !
@kroniqque
@kroniqque Жыл бұрын
Thanks for this great explanation.🙏
@ga28gx
@ga28gx 3 жыл бұрын
Thank you! I'm reading vue source code recently and this video helps a lot!
@atmospheric_b
@atmospheric_b 5 жыл бұрын
That animation and the quality of explanation is god like. Thanks!
@mohammadmahdialvansaz8001
@mohammadmahdialvansaz8001 Жыл бұрын
perfect explanation. thanks
@bs00717
@bs00717 2 жыл бұрын
maan it is the best way to explain🔥🔥🔥
@hamzabenkhaldoun
@hamzabenkhaldoun 5 жыл бұрын
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
@antoniomiranda7472 4 жыл бұрын
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.
@andresalcaino7570
@andresalcaino7570 4 жыл бұрын
Advanced componentes, a great course for learning about reactivity
@anoopisaac
@anoopisaac 5 жыл бұрын
Awesome elegant explanation.Good work sir
@harshskulshrestha1915
@harshskulshrestha1915 3 жыл бұрын
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.
@JurajPecháč
@JurajPecháč 6 жыл бұрын
in video: record: save this code inside the target I think correct is: record: save this code inside the storage
@xamael1989
@xamael1989 5 жыл бұрын
It's a really good video thank you sir
@andychung6877
@andychung6877 6 жыл бұрын
Thanks, really awesome
@trojan606
@trojan606 Жыл бұрын
i love this
@heybudi_
@heybudi_ 4 жыл бұрын
Damn, pretty good explanation!! Subscribedddd!! Thank you!! ❤️❤️❤️❤️
@bohdanafanasyev3642
@bohdanafanasyev3642 5 жыл бұрын
Amazingly explained, thank you good sir :)
@rthangam77
@rthangam77 6 жыл бұрын
Awesome thanks for the detailed explanation
@JurajPecháč
@JurajPecháč 6 жыл бұрын
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?
@user-rw7dg2ol8w
@user-rw7dg2ol8w 6 жыл бұрын
Juraj Pecháč just proxy this.prop to this.data.prop.
@4ortson
@4ortson 3 жыл бұрын
so i looked at the finished example 13:08 for a long time and i have a question. isn't the watcher function redundant?
@vipulbhardwaj950
@vipulbhardwaj950 5 жыл бұрын
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
@VueMastery 5 жыл бұрын
Hey Vipul. The next lesson is within our Advanced Components course over on VueMastery.com: www.vuemastery.com/courses/advanced-components/the-introduction
@equals5StaR
@equals5StaR 5 жыл бұрын
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
@vladimiroscolcov1163 5 жыл бұрын
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.
@giullianopaz8262
@giullianopaz8262 5 жыл бұрын
WOW! Thanks for that amazing video. What's the software you use to make that animations?
@VueMastery
@VueMastery 5 жыл бұрын
We use Keynote for all the animations.
@NZGoldvisa
@NZGoldvisa 11 ай бұрын
👍
@YevhenUzhva
@YevhenUzhva 6 жыл бұрын
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'.
@YevhenUzhva
@YevhenUzhva 6 жыл бұрын
Isn't it just a improved flux princip for specific needs?
@sanchitcop19
@sanchitcop19 4 жыл бұрын
Subscribed!
@jasonsysu
@jasonsysu 6 жыл бұрын
awesome v
@rafadydkiemmacha7543
@rafadydkiemmacha7543 5 жыл бұрын
This is very confusing explanation of a simple pattern. You should have started from Object.defineProperty instead of juggling these globals without context before.
@JamesMarks
@JamesMarks 4 жыл бұрын
IMO "hipster syntax" is leaving out semicolons.
Reactive Programming from Scratch (JavaScript) - Ep1
38:26
Christopher Okhravi
Рет қаралды 29 М.
JavaScript Promises  -- Tutorial for Beginners
37:05
ColorCode
Рет қаралды 119 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
Magic? 😨
00:14
Andrey Grechka
Рет қаралды 19 МЛН
My Cheetos🍕PIZZA #cooking #shorts
00:43
BANKII
Рет қаралды 28 МЛН
Zombie Boy Saved My Life 💚
00:29
Alan Chikin Chow
Рет қаралды 25 МЛН
Inheritance in JavaScript - Prototypal Inheritance tutorial
20:06
The best way to learn Vue.js in 2024 - CRASH COURSE
57:21
Vue Mastery
Рет қаралды 165 М.
JavaScript Pro Tips - Code This, NOT That
12:37
Fireship
Рет қаралды 2,5 МЛН
Reactivity Explained
7:29
Awesome
Рет қаралды 28 М.
The JavaScript Survival Guide
14:47
Fireship
Рет қаралды 725 М.
Vue.js 3 Deep Dive with Evan You
13:46
Vue Mastery
Рет қаралды 59 М.
Mastering Vue.js and Vuex
46:01
WeAreDevelopers
Рет қаралды 85 М.
Reactivity in Vue 3 - How does it work?
9:47
Vue Mastery
Рет қаралды 22 М.
Кадр сыртындағы қызықтар | Келінжан
00:16