Backend Knowledge Sharing #16
VueJS Dynamic Component, Event Loop Model in Node.js
Table of Contents
VueJS Dynamic Component
When various data are needed to be shown using tabs, we basically pre-populate all the data in DOM and show them on event trigger using JS. But what if, the user does not switch to any of the tabs. This results in unnecessary data existence and content flooding in DOM.
Using dynamic Vue component, we can achieve such requirement in a better way. It only loads the necessary component and its contents material in the DOM. Besides, the created component instances can be cached by wrapping our dynamic component with a <keep-alive> element.
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>// here currentTabComponent is the name of the component
When a component is toggled inside <keep-alive>element, its activated and deactivated lifecycle hooks will be invoked accordingly. Since the created component is already cached, the condition of multiple API hit can be preserved.
For further explanation and its usage, visit official documentation of VUE JS.
Event Loop Model in Node.js
This week Pankaj Nepal shared the basics about Node.js architecture demonstrating the event loop model. For a beginner, understanding the event loop in an event-driven programming language is very important. Since Node.js is a single-threaded asynchronous event-driven language, it implements event-loop to listen and execute scripts asynchronously.
Below you can find a nice, little and very informative blog by Pankaj Nepal on how Node.js actually operates on a single-thread with event loop to achieve the great speed it is well known for.
If you are a avid reader or have the constant curiosity of all thing software development , here are more articles from us,,
