The 4 Phases Of Vue Component Rendering

Prasad Jayakumar
Nov 18 Β· 2 min read
Image for post
Image for post
Photo by K8 on Unsplash

β€œ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

Image for post
Image for post
Vue template to render function

When we use Vue CLI, the Vue template will be converted to render JS function during the build process. This approach gives dual advantage.

  1. We need only Vue runtime library β€” Smaller Vue bundle.
  2. Compile phase is excluded β€” Improves the overall processing.
Image for post
Image for post
No compile step in Vue CLI based runtime

Activities performed during init phase

Activities performed during compile phase

Activities performed during render and patch phase

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer β€” welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store