After each view instance is created, it completes its tasks step by step. For example, it needs to set up data observation, compile the template, mount instance in the DOM, and update the DOM when any data changes. Similarly, it runs functions called lifecycle hooks, which allow the user to add their own code in certain steps.
Lifecycle Diagram
Template Syntax
VueJS uses HTML-based template syntax that lets you bind declaratively rendered DOMs to data under Vue instances. All Vue.js templates are valid HTML that can be parsed by Space-Compliant Browser and HTML Parser.
Vue compiles its templates into Virtual DOM render functions under the same umbrella. Combining with the reactivity system, Vue very cleverly finds a limited number of components to re-render. And finds a limited number of DOM manipulations to apply when the app state changes.
If you are familiar with Virtual DOM concepts and know JavaScript well, you can create your own render functions directly with additional JSX support instead of template syntax.