“The more layers you peel away, the more you cry” by saghul 😆
Vue goes through four phases
- init — includes initialization, beforeCreate and created lifecycle hooks
- compile — convert template to internal functions
- render — returns a virtual DOM node
- 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
When we use Vue CLI, the Vue template will be converted to render JS function during the build process. This approach gives dual advantage.
- We need only Vue runtime library — Smaller Vue bundle.
- Compile phase is excluded — Improves the overall processing.
Activities performed during init phase
Activities performed during compile phase
Activities performed during render and patch phase