DEV Community

How does Reactivity work in Vue.js?

Aman Sharma on April 18, 2020

In the world of Front-end developers, "Reactivity" is something that everybody uses, but very few people understand. It's no one's fault, really, a...

Read full post

yodeco • Apr 19 '20

Hey Aman, thanks a lot for your post! Couple of thing to know about modern front-end, just for fun:

Navigate to your final fiddle at jsfiddle.net/nerdycap007/kghzdoax/... JS tab;
Remove everything but let renderFunction = () => { document.getElementById("message").innerHTML = data.message; }
Run then fiddle :)

We should always consider how big our project is before deciding on React/Angula/Vue or just vanilla JS.

Aman Sharma • Apr 19 '20 • Edited

Can you elaborate, what you are trying to say?

yodeco • Apr 19 '20

That reactivity is a real matter for huge projects, and for smaller ones we should double think before consideration.

Thanks for the article, it explains the flow really good.

Aman Sharma • Apr 19 '20

Ohh yeah totally,
If your are just making a single and simple web page, for some reason, then there is no reason to pick any kind of a framework for that.. Frameworks come into place only when we want things like, scalability, maintainability, etc.

jianwu • Jun 14 '20

Thanks for the Very clear explanation. Could you also explain how to handle nested components ( watchs).

Aman Sharma • Jun 15 '20

Thank you :-)
Also, thank you for the suggestion of another good topic, I will surely write a post for that as well.
If any, you can tell me questions regarding this topic (Handling nested components) for which you need an in-depth explanation.

jianwu • Jul 12 '20

I'm a bit curious about how we handle "target" if there's a nested component. In your example, we put "target" as a global variable. That means only one target can be set at one time. But in the nested component. e.g. component A includes component B

watch(renderFunctionForA)

function readnerFunctionForA() {
  // render A.data
  watch(renderFunctionForB)
}

renderFunctionForB() {
  // Render B.data
}