“The more layers you peel away, the more you cry” by saghul 😆

Vue JS is simple but powerful library + framework. JavaScript developer could improve their skills by decoding the Vue code base. Vue anatomy blog is my attempt to decode.

Vue goes through four phases

1. init — includes initialization, beforeCreate and created lifecycle hooks
2. compile — convert template to internal functions
3. render — returns a virtual DOM node
4. patch — Compares the virutal DOM with last virtual DOM and renders the delta in your browser DOM

When we prefer to do quick prototype, we include Vue library (full build — runtime + compile) directly in html file. The downside of this approach is compile phase will be executed every time.

Code written in template section will be converted into render JS function as shown below

#web-development #programming #javascript #vue #developer