How Do You Use Various Cdns
VueJS is available in jsdelivr, unpkg and cdnjs etc CDNs. Normally you can use them for prototyping or learning purposes.
For example, you can use them using jsdelivr with latest versions as below,
< scriptsrc="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"> < /script>
You can use it for native ES modules as below,
< scripttype="module"> import Vue from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.esm.browser.js'< /script>
Note: You can remove version number to get latest version.
What Are Custom Blocks
You can define custom language blocks inside *.vue files based on the lang attribute of the block, the block’s tag name, and the rules in your webpack config. You can also use resourceQuery to match a rule against a custom block with no lang.
For example, to match against < message> custom blocks.
}
What Is The Purpose Of Keep Alive Tag
Keep-alive tag is an abstract component used to preserve component state or avoid re-rendering. When you wrapped tag around a dynamic component, it caches the inactive component instances without destroying them.
Let’s see the example usage of it,
< !--Inactivecomponentswillbecached!--> < keep-alive> < componentv-bind:is="currentTabComponent"> < /component> < /keep-alive>
When there are multiple conditional children, it requires that only one child is rendered at a time.
< !--multipleconditionalchildren--> < keep-alive> < comp-av-if="a > 1"> < /comp-a> < comp-bv-else> < /comp-b> < /keep-alive>
Note: Remember that keep-alive tag doesnt render a DOM element itself, and doesnt show up in the component parent chain.
Read Also: What To Write In A Thank You Interview Email
What Are Attribute Bindings In Vue
Applications typically involve updating and keeping the template in sync with your components properties. For this lower-difficulty Vue interview question, a dev job candidate should be able to explain what attribute binding is and how they work at a high level.
Vue uses the v-bind directive or its short-form : to instruct Vue that the property should be kept in sync with the components property of the same name.
For example, an elements id can be bound to a dynamic id by using either of the syntaxes below.
< !-- v-bind directive --> < div v-bind:id="dynamicId"> < /div> < !-- short form --> < div :id="dynamicId"> < /div>
Updates To Child Components
React Hooks
Another difference is that child components can experience updates if event handlers are passed in React. This is avoided by requiring useCallback explicitly.
Vue.js Composables
However, Vue.js doesn’t require you to manually cache callback functions. It ensures that child components are updated only when needed, thanks to its reactivity system.
Vue.js syntax allows users to put HTML within their templates. As a result, it enables more control and versatility within a Vue application.
Users can inject raw HTML data within their code using the v-html attribute. It enables a piece of text to be interpreted as HTML and processed accordingly. The example below shows the difference between regular Vue text interpolation and v-html.
< p> Using text interpolation: }< /p> < p> Using v-html directive: /< span v-html="htmlCode"> /< /span> < /p>
Now, if you wish to incorporate data bindings within HTML attributes, you can use the v-bind directive, as shown below.
< div v-bind:authenticated="authenticatedStatus"> < /div>
Such attributes are called directives since they instruct Vue to process something in a specific way.
Note: Commonly asked Vue.js interview question
test => )
We can create a simple filter for this scenario by using the built-in string method within JavaScript for capitalizing letters.
filters: ,
Note: Commonly asked Vue.js interview question
Don’t Miss: How To Prepare For Hackerrank Interview
What Is The Virtual Dom And How Is It Beneficial
The virtual DOM is a tree-like data structure of JavaScript objects representing DOM nodes that are managed by Vue.js and that should be rendered on the page. These objects are called virtual nodes or VNodes for short.
The main purpose of the virtual DOM is faster and more efficient DOM manipulation. When there are lots of nodes in the DOM, updating them can be expensive in terms of processing power and resources required.
Working with the virtual DOM JavaScript object is significantly faster. Subsequently, Vue.js organizes DOM updates in batches for more efficiency.
What Is Git Tutorial
Git is a allotted revision manage and source code control system with an emphasis on speed. Git became initially designed and advanced through Linus Torvalds for Linux kernel development. Git is a free software distributed below the terms of the GNU general Public License version 2.
This tutorial explains how to use Git for project model manage in a distributed environment at the same time as working on web-based and non web-based applications development.
Recommended Reading: How To Conduct An Online Interview
What Are The Skills Needed For A Vuejs Developer
An ideal Vue developer should be knowledgeable in JavaScript, Vue.js, HTML, CSS, and various other technologies and concepts discusses above.
But when youre in the process of hiring Vue.js developers, you should also be ready with what exactly youre looking for in potential hires.
What is the extent of knowledge and technical know-how required in a Vue developer? There are a variety of technical and soft skills that are a must in an ideal candidate.
Passing Of Data From A Primary Component To A Secondary Component Is A Common Feature For Vuejs And Angularjs How Would You Achieve Data Pass From Parent To Child Component In Vuejs
Just like in the real world, parents are viewed as a source of knowledge or better less more experience. A child seeks more information from a parent and the parent either teaches or writes down steps and procedures to be followed. In the development world and as in our case, Vue.js framework, data is passed to a child component through attributes or as attributes. Data can be passed inline or using the component method. Methods are the reusable vue requests that separate the code and the modular. Its incorporation has helped to reduce repetitions. Props are the most commonly used passage. They are one way inlets in the component.
< Script> Export default } < /script>
In the above example, the prop is declared in the child section for it to appear as a normal variable.
Don’t Miss: How To Interview A Prospective Employee
How Do You Make Sure Vue Application Is Csp Complaint
Some environments prohibits the usage of new Function for evaluating expressions and the full builds of vue applications depends on this feature to compile templates. Due to this reason, the full builds of VueJS application are not CSP complaint.
In this case you can use runtime-only builds with Webpack + vue-loader or Browserify + vueify technology stack through which templates will be precompiled into render functions. This way you can make sure VueJS applications are 100% CSP complaint.
What Makes Vue Superior To Angular
Ans: Because of its vast built-in functionalities and community support, Angular is an obvious choice for developing enterprise-based applications. When it comes to creating user interfaces and tackling complicated problems, Vue is a technically sound framework.
Knowing what you can expect in the interview surely helps you prepare and perform well. Now that you have a comprehensive list of Vue.js interview questions for beginners and professionals, refer to them while preparing. Lastly, stay confident and showcase your knowledge like a professional.
Stay updated with our newsletter, packed with Tutorials, Interview Questions, How-to’s, Tips & Tricks, Latest Trends & Updates, and more Straight to your inbox!
Don’t Miss: How To Write A Thank You Email After An Interview
How Do You Work With Unit Testing In Vue
Vue CLI has built-in options for unit testing with Jest or Mocha that works out of the box. We also have the official Vue Test Utils which provides more detailed guidance for custom setups. Export the raw options:
< template> < span> }< /span> < /template> < script> export default }, created }< /script>
Then import the component options along with Vue, and you can make many common assertions :
// Import Vue and the component being tested import Vue from 'vue' import MyComponent from 'path/to/MyComponent.vue' // Here are some Jasmine 2.0 tests, though you can // use any test runner/assertion library combo you prefer describe => ) })
What Are The Advantages Of Using Vuejs
Following is the list of advantages of using Vue.js:
Very Small In Size
One of Vue.js’ biggest advantages is that it is very small in size. This exciting JavaScript plug-in is only 18-21KB, so you can download and use it very easily in no time.
Easy to Understand and Use
The framework of Vue.js is very easy to understand, and it id one of the reasons for the popularity of this framework. The users can easily add Vue.js to their web project because of its simple structure and develop applications.
Simple Integration with Existing Applications
Vue.js framework can be integrated with the existing applications very easily. Vue.js has a lot of components for everything. You can integrate it with any application that is written in JavaScript.
Flexible in nature
The flexible nature of Vue.js also makes it easy to understand for the developers of React.js, Angular.js, and any other new JavaScript framework. It provides a lot of flexibility to use virtual nodes to write HTML files, JavaScript files, and pure JavaScript files.
Components
The v-if directive supports the tab. The v-show directive doesn’t support the tab.
Read Also: Chief Technology Officer Interview Questions
What Is The Purpose Of Using V
In Vue.js, the v-for directive is used because it allows us to loop through items in an array or object. By using this directive, we can iterate on each element in the array or object.
Example of v-for directive usage in Array:
We can also use the delimiter instead of in, similar to JavaScript iterators.
Example of v-for directive usage in Object:
What Are Custom Directives
Custom Directives are tiny commands that you can attach to DOM elements. They are prefixed with v- to let the library know you’re using a special bit of markup and to keep syntax consistent. They are typically useful if you need low-level access to an HTML element to control a bit of behavior.
Let’s create a custom focus directive to provide focus on specific form element during page load time,
// Register a global custom directive called `v-focus`Vue.directive
Now you can use v-focus directive on any element as below,
< inputv-focus>
You May Like: Uscis Interview Interpreter By Phone
What Is The Benefit Of Render Functions Over Templates
In VueJS, the templates are very powerful and recommended to build HTML as part of your application. However, some of the special cases like dynamic component creation based on input or slot value can be achieved through render functions. Also, these functions gives the full programmatic power of javascript eco system.
What Causes Prop Drilling In Vuejs
- Prop drilling – props are used to pass data from parent to child. The use of props is effective until deep chaining of components is encountered.
- Prop drilling is caused when a distant component in a large component tree and a deeply nested component want something from a distant ancestor component. In this case, all of the intermediate components should have to pass props from the distant ancestor across the entire chain.
- It involves the passing of props along the entire chain for the distant component to use the data.
- It is difficult to maintain, prone to bugs, and is hard to work.
You May Like: How To Interview For A Customer Service Job
Describe Data Flow Between Components In A Vuejs App
Vue.js uses whats called a one-way data flow. Data is passed to child components from a given parent component using a prop or a custom attribute that becomes a property on the child component instance.
When the parent component updates a prop value, its automatically updated in the child component. Mutating a property inside a child component should not be done. Also, it does not affect the parent component .
The child component can communicate back to the parent via an event. The parent can assign a handler to any event emitted by the child component instance and data can be passed back to the parent. The child component can emit a special event for updating the props passed to it.
Is It Possible To Use Custom Inject Name For Css Modules
You can customize the name of the injected computed property by giving the module attribute a value. This will be helpful to avoid overwriting injected styled if you have more than one < style> tags in a single *.vue component.
For example, you can use module attribute as below,
< stylemodule="a"> /* identifiers injected as a */< /style> < stylemodule="b"> /* identifiers injected as b */< /style>
Also Check: Questions For Product Owner Interview
Ensuring That The Defined Css Styles In Single Files Are Applied Singularly To A Component Is A Vital Skill For A Vuejs Developer How Would You Achieve This If Applied To One Component Only
Modern applications using CSS files tend to grow with time to levels that certain styles cannot be easily traced. This makes it difficult to even initiate a change or an update on the styles. Although single file components has allowed developers to grow in writing more logical ways compared to writing them in several languages, tracking certain styles in huge applications is quite difficult. Thanks to scoped styles, such challenges have been curbed. Scoped styles allow us to put down CSS that only apply to the components we need.
An example of applied scoped styles is shown below. < style scoped> .example < /style> < template> < div class=example> hi< /div> < /template>
In this example, the example class will only apply to that particular component only. This is accomplished by putting another data attribute to serve all the other elements within that particular component that are still engulfed by the initial CSS. Doing this does not prevent the styles from being influenced by other exterior styles, only that scoped styles are selfish. They do not allow leakage of their styles to other components. There are many other Vue styles such as deep styles, slotted styles, global styles, style modules among many other styles. They perform different but closely related functions to the scoped styles.
What Is The Difference Between Stateful And Stateless Logic Explain And Give Examples
-
Stateful logic – involves managing the state which changes over time. It is concerned with data that is of a different state whose state is changing every time.
Example: tracking the position of some moving object, as the time passes if something is in motion then its position is changing. so, we can say the position has a different state and a logic performing some manipulation on position is called stateful logic.
-
Stateless logic – takes a certain input value and just returns the expected result. It deals with stateless data whose value is not changing over time. We are not considering the previous value of the data but the current one only. There are many libraries that are used in every programming language, for example date formatting. This library, whatever value you passed to it, will give you a date format that is always the same.
Generally stateless logic does not involve a record of previous interactions and each and every interaction request has to be handled based on information that is new .
Read Also: How To Crack Google Interview
Plugins Are Key Tools For Developers What Are Plugins And What Are Their Uses
A plugin is a set of code or software that is added to a program or installed in a system to enhance its functionality. In Vue, the sole purpose of plugins is to enable developers to build and add both local and global level functionalities to an application.
Vue plugins have several uses. Distribution of application components and addition of extra features such as routing and immutable data sources are just a few of the many uses. The simplicity and ease of use are two of the most notable features of Vue plugins. VueFire plugin used for adding firebase methods and binding to an entire application is an example of one of the commonly used plugin. Other plugins are Vuetify, VuePress, VueTour, VueX and Vee-charJS. Installing a plugin involves the use of a pseudo-code shown below
A plugin imposes an install method or acts as an install function in itself. The function accesses the app instance along with any other additional options.
Plugins are extremely useful in registering one or several global components or customized directives in the form of app.component and app.directive. They are also important in making resources injectable in an application by using an app.provide calling.
What Are The Different Event Modifiers Vuejs Provides
Normally, JavaScript provides event.preventDefault or event.stopPropagation inside event handlers. We can use Vue.js methods, but these methods are meant for data logic instead of dealing with DOM events.
Vue.js provides the following event modifiers for v-on and these modifiers are directive postfixes denoted by a dot symbol.
See the following example of stop modifier:
Example of chain modifiers as follows:
Recommended Reading: How To Start An Interview With Someone
How Do You Test Mutations
Since mutations are just functions that completely rely on their arguments it will be easier to test. You need to keep mutations inside your store.js file and should also export the mutations as a named export apart from default export.
Let’s take an example of increment mutations,
// mutations.jsexportconstmutations=
And test them using mocha and chai as below,
// mutations.spec.jsimportfrom'chai'importfrom'./store'// destructure assign `mutations`const=mutationsdescribe=> // apply mutationincrement// assert resultexpect.to.equal})})
More Beginner Vue Interview Questions To Practice
Before we wrap this article up, here are a few other easy Vue interview questions you might be asked at your upcoming meeting:
- What is a Vue instance and how do you create it?
- How do you access the root instance?
- How do you access a components parent instance?
- What are the differences between static and dynamic props?
- What are the different ways you can create a component in Vue?
- What are the pros and cons of single-file components?
- What is the Vue CLI?
- What are the features provided by Vue CLI?
- How do you use v-for directive with a range?
- What are hook functions provided by directives?
Arc is a radically different remote job search platform where companies apply to you. We feature developers directly to tech companies and startups and help you land a remote job in 14 days. .
Also Check: Questions To Ask In Product Manager Interview
