Vue.js advanced interview questions that you can read before the interview.
1. What is vue-loader?
Vue-loader is a loading module for Webpack that allows us to write single-file components in the Vue file format.
The single-file component file has three parts (template, script, and styles). The Vue-Loader module allows WebPack to extract and process each person section using a separate load module (such as a SASS or SCSS loader). This setting allows us to write programs seamlessly using Vue files.
The Vue-Loader module also allows static resources to be treated as module dependencies and to be processed using the WebPack loader. It also allows hot reinstalls during development.
2. How to specify the type requirements of a prop?
By implementing the Prop validation option, you can specify type requirements for a single prop. This has no impact on production, but a warning is issued in the development section to help the developer identify potential problems with the transfer of human data and specific types of requirements for the prop.
Example of configuring three prop:
props : {
accountNumber:{
type : Number,
required : true
},
name :{
type : String,
required : true
},
favoriteColors : Array
}
Copy the code3. What is the virtual DOM?
The document Object model, or DOM, defines an interface that allows languages such as JavaScript to access and manipulate HTML documents. Elements are represented by nodes in the tree, and interfaces allow us to manipulate them. But this interface comes at a cost, in the form of a lot of very frequent DOM operations that slow down the page.
Vue solves this problem by implementing a virtual representation of the document structure in memory, where virtual nodes represent nodes in the DOM tree. When manipulation is required, calculations and operations can be performed in the memory of the virtual DOM rather than on the real DOM. This is naturally faster, and allows the DOM algorithm to compute optimization to compute optimization in a way that updates the actual DOM structure.
Once calculated, it is applied to the actual DOM tree, which improves performance, which is why virtual DOM-based frameworks such as Vue and React stand out so well.
4. What is Vue plug-in?
The Vue plug-in allows developers to build global level functionality and add it to Vue. Used to add globally accessible methods and properties, resources, options, mixins, and other custom APLs to a program. VueFire is an example of a Vue plug-in that adds FireBase-specific methods and binds them to the entire program. The Firebase function can then be used in the this context anywhere in the program structure.
5. What is a mixin?
Mixins enable us to write pluggable and reusable functionality for Vue components. If you want to reuse a set of component options, such as lifecycle hooks, methods, etc., across multiple components, you can write them as mixins and simply reference them in the component. Then merge the contents of the mixin into the component. If you define a lifecycle hook in a mixin, it will be optimized for the component’s own hook at execution time.
6. What is a render function? Let me give you an example.
Vue allows us to build templates in a number of ways, the most common of which is to use HTML only for responsive functionality with special instructions and mustache tags. But you can also use JavaScript to build templates using special function classes called render functions. These functions are very close to the compiler, which means they are more efficient and faster than other template types. Since you write your rendering functions in JavaScript, you are free to use the language directly to add custom functions where you need them.
Very useful for advanced solutions to standard HTML templates.
Here is the Vue program using HTML as a template
new Vue ({
el: '#app',
data:{
fruits: ['Apples'.'Oranges'.'Kiwi']
},
template:
`<div>
<h1>Fruit Basket</h1>
<ol>
<li v-for="fruit in fruits">{{ fruit }}</li>
</ol>
</div>
`
});
Copy the codeHere’s the same program developed with the rendering function:
new Vue({
el: '#app',
data: {
fruits: ['Apples'.'Oranges'.'Kiwi']
},
render: function(createElement) {
return createElement('div', [
createElement('h1'.'Fruit Basket'),
createElement('ol', this.fruits.map(function(fruit) {
return createElement('li', fruit); }))); }});Copy the codeThe output is as follows:
Fruit Basket
1, Apples 2, Oranges 3, Apples
In the example above, we used a function that returns a series of createElement() calls, each responsible for generating an element. While the V-for directive works in htML-based templates, the rendering function at the time could have simply used the standard.map() function to traverse the Fruits data array.
7. Which lifecycle hook is most appropriate to get data from APl calls?
Although this depends on the purpose and purpose of the component, the life cycle hooks created are usually a good place to place APl calls. The component’s data and responsiveness capabilities are available, but the component has not yet been rendered.
8. When to call the “updated” lifecycle hook?
After the responsive data is updated and the virtual DOM is rerendered, the updated hook is called. It can be used to perform DOM-related operations, but there is no guarantee (by default) that the child component will be rendered, although this can be ensured by using this.$nextTick in the update function.
9. Why not use arrow functions when writing lifecycle hooks or other options/properties in Vue instances?
The arrow function itself does not define the this context. When you use the arrow function (=>) in a Vue program, the this keyword is not bound to the Vue instance and therefore raises an error. So it is strongly recommended that you use standard function declarations instead.
What is an asynchronous component?
When a large program uses a large number of components, it may not make sense to load them all from the server at the same time. In this case, Vue allows us to define components that are loaded asynchronously from the server as needed. When a component is declared or registered, Vue accepts the factory function that provides the Promise. The component can then be “parsed” when it is called.
You can save bandwidth and program load time by loading only the base components and deferring the loading of the asynchronous components to a future call time.
This is a simple example of an asynchronous component.
new Vue({
components: {
'tweet-box': () => import('./components/async/TweetBox')}});Copy the codeWhen used in this way, Webpack’s code split is used to provide this functionality.