Google News
logo
Vue.JS Interview Questions
You can chain filters one after the other to perform multiple manipulations on the expression. The generic structure of filter chain would be as below,
{{ message | filterA | filterB | filterB ... }}
In the above chain stack, you can observe that message expression applied with three filters, each separated by a pipe(|) symbol. The first filter(filterA) takes the expression as a single argument and the result of the expression becomes an argument for second filter(filterB) and the chain continue for remaining filters.
 
For example, if you want to transform date expression with a full date format and uppercase then you can apply dateFormat and uppercase filters as below,
{{ birthday | dateFormat | uppercase }}
Sometimes there is a need to extend the functionality of Vue or apply an option to all Vue components available in our application. In this case, mixins can be applied globally to affect all components in Vue. These mixins are called as global mixins.
 
Let's take an example of global mixin,
Vue.mixin({
  created(){
    console.log("Write global mixins")
  }
})

new Vue({
  el: '#app'
})
In the above global mixin, the mixin options spread across all components with the console running during the instance creation. These are useful during test, and debugging or third party libraries. At the same time, You need to use these global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components.
Using Vue CLI, mixins can be specified anywhere in the project folder but preferably within /src/mixins for ease of access. Once these mixins are created in a .js file and exposed with the export keyword, they can be imported in any component with the import keyword and their file paths.
A directive can take any valid javascript expression. So if you want to pass multiple values then you can pass in a JavaScript object literal.
 
Let's pass object literal to an avatar directive as below
<div v-avatar="{ width: 500, height: 400, url: 'path/logo', text: 'Iron Man' }"></div>
Now let us configure avatar directive globally,
Vue.directive('avatar', function (el, binding) {
  console.log(binding.value.width) // 500
  console.log(binding.value.height)  // 400
  console.log(binding.value.url) // path/logo
  console.log(binding.value.text)  // "Iron Man"
})
VueJS provides proprietary alternatives and plain javascript usage for the template features.
 
Let's list down them in a table for comparision,

Templates Render function
Conditional and looping directives: v-if and v-for Use JavaScript’s if/else and map concepts
Two-way binding: v-model Apply own JS logic with value binding and event binding
Capture Event modifiers: .passive, .capture, .once and .capture.once or .once.capture &, !, ~ and ~!
Event and key modifiers: .stop, .prevent, .self, keys(.enter, .13) and Modifiers Keys(.ctrl, .alt, .shift, .meta) Use javascript solutions: event.stopPropagation(), event.preventDefault(), if (event.target !== event.currentTarget) return, if (event.keyCode !== 13) return and if (!event.ctrlKey) return
Slots: slot attributes Render functions provide this.$slots and this.$scopedSlots instance properties
Even though VueJS and ReactJS share few common features there are many difference between them :

Feature VueJS ReactJS
Type JavaScript MVC Framework JavaScript Library
Platform Primarily focused on web development Both Web and Native
Learning Curve Easy to learn the framework A steep learning curve and requires deep knowledge
Simplicity Vue is simpler than React React is more complex than Vue
Bootstrap Application Vue-cli CRA (Create React App)
The the syntax of Vue and Angular is common at some points because Angular is the basis for VueJS development in the beginning.

Feature VueJS Angular
Complexity Easy to learn, simple API and design The framework is bit huge and need some learning curve on typescript etc
Binding of Data One-way binding Two-way binding
Learning Curve Easy to learn the framework A steep learning curve and requires deep knowledge
Founders Created by Former Google Employee Powered by Google
Initial Release February 2014 September 2016
Model Based on Virtual DOM(Document Object Model) Based on MVC(Model-View-Controller)
Written in JavaScript TypeScript
React has the following advantages over Vue
 
* ReactJS gives more flexibility in large apps developing
* Easy to test
* Well-suited for mobile apps creation
* The eco system is quite big and well matured.
Vue has the following advantages over React
 
* Vue is smaller and faster
* The convenient templates ease the process of developing
* It has simpler javascript syntax without learning JSX
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it’s needed. To make this happen, Vue allows you to define your component as a factory function that asynchronously resolves your component definition. These components are known as async component.
 
Let's see an example of async component using webpack code-splitting feature,
Vue.component('async-webpack-example', function (resolve, reject) {
  // Webpack automatically split your built code into bundles which are loaded over Ajax requests.
  require(['./my-async-component'], resolve)
})
Vue will only trigger the factory function when the component needs to be rendered and will cache the result for future re-renders.