Google News
logo
Vue.JS Interview Questions
As the name suggests, mutation methods modifies the original array.
 
Below are the list of array mutation methods which trigger view updates.
 
* push()
* pop()
* shift()
* unshift()
* splice()
* sort()
* reverse()

If you perform any of the above mutation method on the list then it triggers view update. For example, push method on array named 'items' trigger a view update,
vm.todos.push({ message: 'Baz' })
The methods which do not mutate the original array but always return a new array are called non-mutation methods.
 
Below are the list of non-mutation methods :
 
* filter()
* concat()
* slice()

For example, lets take a todo list where it replaces the old array with new one based on status filter,
vm.todos = vm.todos.filter(function (todo) {
  return todo.status.match(/Completed/)
})
This approach won't re-render the entire list due to VueJS implementation.
In Vue.js, every component instance has its own isolated scope. So, you cannot directly reference parent data in a child component's template.
 
Props are used to pass down data to the child components. Props are custom attributes. You can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
Vue.component('blog-post', {  
  // camelCase in JavaScript  
  props: ['postTitle'],  
  template: '<h3>{{ postTitle }}</h3>'  
})​
 
VueX is a state management pattern and library for the Vue.js application. It is used as a centralized store for all the different components in the Vue.js application.

Vuex provides some rules to ensure that the state can only be mutated in a predictable fashion. You can get a lot of additional features by integrating Vuex with the official devtool extension of Vue.js.
You can install vuex using npm or yarn as below,
npm install vuex --save
(or)
yarn add vuex
In a module system, you must explicitly install Vuex via Vue.use()
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
(OR)
 
You can also install it using CDN links such as unpkg.cpm which provides NPM-based CDN links. Just include vuex after Vue and it will install itself automatically.
<script src="https://unpkg.com/vue.js"></script>
<script src="https://unpkg.com/vuex.js"></script>
Note: You can use a specific version/tag via URLs like https://unpkg.com/vuex@2.0.0. If you don't mention any version then it will point to latest version.
Vuex enforces below high-level principles,
 
* The Application-level state need to be centralized in the store
* The state should be mutated by committing mutations only(i.e, for synchronous transactions)
* The actions should be used for asynchronous transactions.
By default, actions, mutations and getters inside modules are still registered under the global namespace. Because of that multiple modules react to the same mutation/action type.
If you keep all state of our application in a single big state, the store can get really bloated. To solve this problem, Vuex allows us to divide our store into modules. Here, each module can contain its own state, mutations, actions, getters, and even nested modules.
 
Let's take an example with multiple modules, configuring them in vuex and accessing different modules,
const moduleOne = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleTwo = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    one: moduleOne,
    two: moduleTwo
  }
})

store.state.one // -> `moduleOne's state
store.state.two // -> `moduleTwo's state
Yes, we can call Rest API from Vue.js. There are several HTTP libraries that can used to call REST Api's from Vue.js. One of the popular libraries is Axios. It is very simple to use and lightweight. You can include it in your project by using the following command.
npm install axios --save  
Implementing GET method using Axios in Vue JS  
axios({ method: "GET", "URL": "https://httpbin.org/ip" }).then(result => {  
                this.ip = result.data.origin;  
            }, error => {  
                console.error(error);  
            });​
  
You can create a project by using the following command:
vue init webpack myproject  
To run your project, run the following command:
npm run build  
After executing the above command, copy index.html and /dist/ folder into your website root directory, and your project will be deployed.