36. What is the data flow followed by props?
All props follows a one-way-down binding between the child property and the parent one. i.e, When the parent property is updated then that latest prop value will be passed down to the child, but not the otherway(child to parent) around. The child component should not mutate the prop otherwise it throws a warning in the console.
The possible mutation cases can be solved as below,
1. When you try to use parent prop as initial value for child property:
In this case you can define a local property in child component and assign parent value as initial value
```javascript
props: ['defaultUser'],
data: function () {
return {
username: this.defaultUser
}
}
```
2. When you try to transform the parent prop:
You can define a computed property using the prop’s value,
```javascript
props: ['environment'],
computed: {
localEnvironment: function () {
return this.environment.trim().toUpperCase()
}
}
```
37. What are non prop attributes?
A non-prop attribute is an attribute that is passed to a component, but does not have a corresponding prop defined.
For example, If you are using a 3rd-party custom-input component that requires a `data-tooltip` attribute on the input then you can add this attribute to component instance,
```javascript
<custom-input data-tooltip="Enter your input" />
```
If you try to pass the props from parent component the child props with the same names will be overridden. But props like `class` and `style` are exception to this, these values will be merged in the child component.
```javascript
//Child component
<input type="date" class="date-control">
//Parent component
<custom-input class="custom-class" />
```
38. Describe about validations available for props?
Vue provides validations such as types, required fields, default values along with customized validations. You can provide an object with validation requirements to the value of props as below,
Let's take an example of user profile Vue component with possible validations,
```javascript
Vue.component('user-profile', {
props: {
// Basic type check (`null` matches any type)
age: Number,
// Multiple possible types
identityNumber: [String, Number],
// Required string
email: {
type: String,
required: true
},
// Number with a default value
minBalance: {
type: Number,
default: 10000
},
// Object with a default value
message: {
type: Object,
// Object or array defaults must be returned from
// a factory function
default: function () {
return { message: 'Welcome to Vue' }
}
},
// Custom validator function
location: {
validator: function (value) {
// The value must match one of these strings
return ['India', 'Singapore', 'Australia'].indexOf(value) !== -1
}
}
}
})
```
39. How do you customize model directive for a component?
The v-model directive on a component uses **value** as the prop and **input** as the event, but some input types such as `checkboxes` and `radio buttons` may need to use the value attribute for a server side value. In this case, it is preferred to customize model directive. Let's take an example of checkbox component,
```javascript
Vue.component('custom-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
```
Now you can use v-model on this customized component as below,
```javascript
<custom-checkbox v-model="selectFramework"></custom-checkbox>
```
The selectFramework property will be passed to the checked prop and same property will be updated when custom checkbox component emits a change event with a new value.
40. What are the possible ways to provide transitions?
There are many ways Vue provides transition effects when items are inserted, updated, or removed from the DOM. Below are the possible ways,
1. Automatically apply classes for CSS transitions and animations
2. Integrate 3rd-party CSS animation libraries. For example, Animate.css
3. Use JavaScript to directly manipulate the DOM during transition hooks
4. Integrate 3rd-party JavaScript animation libraries. For example, Velocity.js
41. What is vue router and their features?
Vue Router is a official routing library for single-page applications designed for use with the Vue.js framework. Below are their features,
1. Nested route/view mapping
2. Modular, component-based router configuration
3. Route params, query, wildcards
4. View transition effects powered by Vue.js' transition system
5. Fine-grained navigation control
6. Links with automatic active CSS classes
7. HTML5 history mode or hash mode, with auto-fallback in IE9
8. Restore scroll position when going back in history mode
42. What are the steps to use vue router and give an example?
It is easy to integrate vue router in the vue application. Let us see the example with step by step instructions.
**Step 1:** Configure router link and router view in the template
```javascript
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>Welcome to Vue routing app!</h1>
<p>
<!-- use router-link component for navigation using `to` prop. It rendered as an `<a>` tag -->
<router-link to="/home">Home</router-link>
<router-link to="/services">Services</router-link>
</p>
<!-- route outlet in which component matched by the route will render here -->
<router-view></router-view>
</div>
```
**Step 2:** Import Vue and VueRouter packages and then apply router
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
```
**Step 3:** Define or import route components.
```javacript
const Home = { template: '<div>Home</div>' }
const Services = { template: '<div>Services</div>' }
```
**Step 4:** Define your route where each one maps to a component
```javascript
const routes = [
{ path: '/home', component: Home },
{ path: '/services', component: Services }
]
```
**Step 5:** Create the router instance and pass the `routes` option
```javascript
const router = new VueRouter({
routes // short for `routes: routes`
})
```
**Step 6:** Create and mount the root instance.
```javacript
const app = new Vue({
router
}).$mount('#app')
```
Now you are able to navigate different pages(Home, Services) with in Vue application.
43. What is dynamic route matching?
Sometimes it may be required to map routes to the same component based on a pattern. Let's take a user component with the mapped URLs like `/user/john/post/123` and `/user/jack/post/235` using dynamic segments,
```javascript
const User = {
template: '<div>User {{ $route.params.name }}, PostId: {{ route.params.postid }}</div>'
}
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name/post/:postid', component: User }
]
})
```
44. How to make router param changes as reactive?
When you navigate from one URL to other(mapped with a single component) using routes with params then the same component instance will be reused. Even though it is more efficient than destroying the old instance and then creating a new one, the lifecycle hooks of the component will not be called. This problem can be solved using either of the below approaches,
1. Watch the $route object:
```javascript
const User = {
template: '<div>User {{ $route.params.name }} </div>',
watch: {
'$route' (to, from) {
// react to route changes...
}
}
}
```
2. Use beforeRouteUpdate navigation guard: This is only available since 2.2 version.
```javascript
const User = {
template: '<div>User {{ $route.params.name }} </div>',
beforeRouteUpdate (to, from, next) {
// react to route changes and then call next()
}
}
```
Note that the beforeRouteEnter guard does NOT have access to `this`. Instead you can pass a callback to `next` to access the vm instance.
45. What is route matching priority?
Sometimes the URL might be matched by multiple routes and the confusion of which route need to be mapped is resolved by route matching priority. The priority is based on order of routes configuration. i.e, The route which declared first has higher priority.
```javascript
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:name', component: User } // This route gets higher priority
{ path: '/user/:name', component: Admin }
{ path: '/user/:name', component: Customer }
]
})
```
46. What are nested routes?
Generally, the app is composed of nested components which are nested multiple levels deep. The segments of a URL corresponds to a certain structure of these nested components. To render components into the nested outlet, you need to use the `children` option in `VueRouter` constructor config.
Let's take a user app composed of profile and posts nested components with respective routes. You can also define a default route configuration when there is no matching nested route.
```javascript
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// UserProfile will be rendered inside User's <router-view> when /user/:id/profile is matched
path: 'profile',
component: UserProfile
},
{
// UserPosts will be rendered inside User's <router-view> when /user/:id/posts is matched
path: 'posts',
component: UserPosts
},
// UserHome will be rendered inside User's <router-view> when /user/:id is matched
{ path: '',
component: UserHome },
]
}
]
})
```
47. What are single file components?
Single File Components are an easy concept to understand. Earlier you might heard about all three parts(HTML, JavaScript and CSS) of your application kept in different components. But Single File Components encapsulate the structure, styling and behaviour into one file. In the beginning, it seems strange to have all three parts in one file, but it actually makes a lot more sense.
Let's take an example of Singile File Components
```javascript
<template>
<div>
<h1>Welcome {{ name }}!</h1>
</div>
</template>
<script>
module.exports = {
data: function() {
return {
name: 'John'
}
}
}
</script>
<style scoped>
h1 {
color: #34c779;
padding: 3px;
}
</style>
```
48. Is Single File Components violating separation of concerns?
As for the latest modern UI development, separation of concerns is not equal to separation of file types. So it is preferred to divide codebase layers into loosely-coupled components and compose them instead of dividing the codebase into three huge layers that interweave with one another. This way makes Single File Components more cohesive and maintainable by combining template, logic and styles together inside a component.
You can also still maintain javascript and CSS files separately with hot-reloading and pre-compilation features. For example,
```
<template>
<div>This section will be pre-compiled and hot reloaded</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
```
49. What are the problems solved by Single File Components?
The Single File Components solve the common problems occurred in a javascript driven application with a .vue extension. The list of issues are,
1. Global definitions force unique names for every component
2. String templates lack syntax highlighting and require ugly slashes for multiline HTML
3. No CSS support means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out
4. No build step restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel.
50. What are filters?
Filters can be used to apply common text formatting. These Filters should be appended to the end of the JavaScript expression, denoted by the “pipe” symbol. You can use them in two specific cases:
1. mustache interpolations
2. v-bind expressions
For example, Let's define a local filter named capitalize in a component’s options
```javascript
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
```
Now you can use the filter in either mustache interpolation or v-bind expression,
```javascript
<!-- in mustaches -->
{{ username | capitalize }}
<!-- in v-bind -->
<div v-bind:id="username | capitalize"></div>
```
51. What are the different ways to create filters?
You can define filters in two ways,
1. **Local filters:**
You can define local filters in a component’s options. In this case, filter is applicable to that specific component.
```javascript
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
```
2. **Global filters:**
You can also define a filter globally before creating the Vue instance. In this case, filter is applicable to all the components with in the vue instance,
```javascript
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
```
52. How do you chain filters?
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,
```javascript
{{ 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,
```javascript
{{ birthday | dateFormat | uppercase }}
```
53. Is it possible to pass parameters for filters?
Yes, you can pass arguments for a filter similar to a javascript function. The generic structure of filter parameters would be as follows,
```javascript
{{ message | filterA('arg1', arg2) }}
```
In this case, filterA takes message expression as first argument and the explicit parameters mentioned in the filter as second and third arguments.
For example, you can find the exponential strength of a particular value
```javascript
{{ 2 | exponentialStrength(10) }} // prints 2 power 10 = 1024
```
54. What are plugins and their various services?
Plugins provides global-level functionality to Vue application. The plugins provide various services,
1. Add some global methods or properties. For example, vue-custom-element
2. Add one or more global assets (directives, filters and transitions). For example, vue-touch
3. Add some component options by global mixin. For example, vue-router
4. Add some Vue instance methods by attaching them to Vue.prototype.
5. A library that provides an API of its own, while at the same time injecting some combination of the above. For example, vue-router
55. How to create a plugin?
The Plugin is created by exposing an `install` method which takes Vue constructor as a first argument along with options. The structure of VueJS plugin with possible functionality would be as follows,
```javascript
MyPlugin.install = function (Vue, options) {
// 1. add global method or property
Vue.myGlobalMethod = function () {
// some logic ...
}
// 2. add a global asset
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// some logic ...
}
...
})
// 3. inject some component options
Vue.mixin({
created: function () {
// some logic ...
}
...
})
// 4. add an instance method
Vue.prototype.$myMethod = function (methodOptions) {
// some logic ...
}
}
```
56. How to use a plugin?
You can use plugin by passing your plugin to Vue's **use** global method. You need to apply this method before start your app by calling new Vue().
```javascript
// calls `MyPlugin.install(Vue, { someOption: true })`
Vue.use(MyPlugin)
new Vue({
//... options
})
```
57. What are mixins?
Mixin gives us a way to distribute reusable functionalities in Vue components. These reusable functions are merged with existing functions. A mixin object can contain any component options. Let us take an example of mixin with `created` lifecycle which can be shared across components,
```javascript
const myMixin = {
created(){
console.log("Welcome to Mixins!")
}
}
var app = new Vue({
el: '#root',
mixins: [myMixin]
})
```
**Note:** Multiple mixins can be specified in the mixin array of the component.
58. What are global mixins?
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,
```javascript
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.
59. How do you use mixins in CLI?
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.
60. What are the merging strategies in mixins?
When a mixin and the component itself contain overlapping options, the options will be merged based on some strategies.
1. The data objects undergo a recursive merge, with the component’s data taking priority over mixins in cases of overlapping or conflicts.
```javascript
var mixin = {
data: function () {
return {
message: 'Hello, this is a Mixin'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'Hello, this is a Component'
}
},
created: function () {
console.log(this.$data); // => { message: "Hello, this is a Component'" }
}
})
```
2. The Hook functions which are overlapping merged into an array so that all of them will be called. Mixin hooks will be called before the component’s own hooks.
```javascript
const myMixin = {
created(){
console.log("Called from Mixin")
}
}
new Vue({
el: '#root',
mixins:[myMixin],
created(){
console.log("Called from Component")
}
})
//Called from Mixin
//Called from Component
```
3. The options that expect object values(such as methods, components and directives) will be merged into the same object. In this case, the component’s options will take priority when there are conflicting keys in these objects.
```javascript
var mixin = {
methods: {
firstName: function () {
console.log('John')
},
contact: function () {
console.log('+65 99898987')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
lastName: function () {
console.log('Murray')
},
contact: function () {
console.log('+91 893839389')
}
}
})
vm.firstName() // "John"
vm.lastName() // "Murray"
vm.contact() // "+91 893839389"
```
61. What are custom options merging strategies?
Vue uses the default strategy which overwrites the existing value while custom options are merged. But if you want a custom option merged using custom login then you need to attach a function to `Vue.config.optionMergeStrategies`
For the example, the structure of `myOptions` custom option would be as below,
```javascript
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}
```
Let's take below Vuex 1.0 merging strategy as an advanced example,
```javascript
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
if (!toVal) return fromVal
if (!fromVal) return toVal
return {
getters: merge(toVal.getters, fromVal.getters),
state: merge(toVal.state, fromVal.state),
actions: merge(toVal.actions, fromVal.actions)
}
}
```
62. 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,
```javascript
// Register a global custom directive called `v-focus`
Vue.directive('focus', {
// When the bound element is inserted into the DOM...
inserted: function (el) {
// Focus the element
el.focus()
}
})
```
Now you can use v-focus directive on any element as below,
```html
<input v-focus>
```
63. How do you register directives locally?
You can also register directives locally(apart from globally) using directives option in component as below,
```javascript
directives: {
focus: {
// directive definition
inserted: function (el) {
el.focus()
}
}
}
```
Now you can use v-focus directive on any element as below,
```html
<input v-focus>
```
64. What are the hook functions provided by directives?
A directive object can provide several hook functions,
1. bind: This occurs once the directive is attached to the element.
2. inserted: This hook occurs once the element is inserted into the parent DOM.
3. update: This hook is called when the element updates, but children haven't been updated yet.
4. componentUpdated: This hook is called once the component and the children have been updated.
5. unbind: This hook is called only once when the directive is removed.
**Note:** There are several arguments that can be passed to the above hooks.
65. What are the directive Hook Arguments?
All the hooks have `el`, `binding`, and `vnode` as arguments. Along with that, **update** and **componentUpdated** hooks expose `oldVnode`, to differentiate between the older value passed and the newer value. Below are the arguments passed to the hooks,
1. `el`: The element the directive is bound to and it can be used to directly manipulate the DOM.
2. `binding`: An object containing the following properties.
1. `name`: The name of the directive, without the `v-` prefix.
2. `value`: The value passed to the directive. For example in `v-my-directive="1 + 1"`, the value would be 2.
3. `oldValue`: The previous value, only available in update and componentUpdated. It is available whether or not the value has changed.
4. `expression`: The expression of the binding as a string. For example in `v-my-directive="1 + 1"`, the expression would be "1 + 1".
5. `arg`: The argument passed to the directive, if any. For example in v-my-directive:foo, the arg would be "foo".
6. `modifiers`: An object containing modifiers, if any. For example in v-my-directive.foo.bar, the modifiers object would be `{ foo: true, bar: true }`.
3. `vnode`: The virtual node produced by Vue’s compiler.
4. `oldVnode`: The previous virtual node, only available in the update and componentUpdated hooks.
The arguments can be represented diagrammatically across the hooks as below,
66. How do you pass multiple values to a directive?
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
```html
<div v-avatar="{ width: 500, height: 400, url: 'path/logo', text: 'Iron Man' }"></div>
```
Now let us configure avatar directive globally,
```javascript
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"
})
```
67. What is function shorthand in directive hooks?
In few cases, you may want the same behavior on `bind` and `update` hooks irrespective of other hooks. In this situation you can use function shorthand,
```javascript
Vue.directive('theme-switcher', function (el, binding) {
el.style.backgroundColor = binding.value
})
```
68. 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.
69. What is a render function?
Render function is a normal function which receives a `createElement` method as it’s first argument used to create virtual nodes. Internally Vue.js' templates actually compile down to render functions at build time. Hence templates are just syntactic sugar of render functions. Let's take an example of simple Div markup and corresponding render function,
The HTML markup can be written in template tag as below,
```javascript
<template>
<div :class="{'is-rounded': isRounded}">
<p>Welcome to Vue render functions</p>
</div>
</template>
```
and the compiled down or explicit render function would appear as below,
```javascript
render: function (createElement) {
return createElement('div', {
'class': {
'is-rounded': this.isRounded
}
}, [
createElement('p', 'Welcome to Vue render functions')
]);
},
```
**Note:** The react components are built with render functions in JSX.
70. Explain the structure of createElement with arguments?
The createElement accepts few arguments to use all the template features. Let us see the basic structure of createElement with possible arguments,
```javascript
// @returns {VNode}
createElement(
// An HTML tag name, component options, or async function resolving to one of these.
// Type is {String | Object | Function}
// Required.
'div',
// A data object corresponding to the attributes you would use in a template.
//Type is {Object}
// Optional.
{
// Normal HTML attributes
attrs: {
id: 'someId'
},
// Component props
props: {
myProp: 'somePropValue'
},
// DOM properties
domProps: {
innerHTML: 'This is some text'
},
// Event handlers are nested under `on`
on: {
click: this.clickHandler
},
// Similar to `v-bind:style`, accepting either a string, object, or array of objects.
style: {
color: 'red',
fontSize: '14px'
},
//Similar to `v-bind:class`, accepting either a string, object, or array of strings and objects.
class: {
classsName1: true,
classsName2: false
},
....
},
// Children VNodes, built using `createElement()`, or using strings to get 'text VNodes'.
// Type is {String | Array}
// Optional.
[
'Learn about createElement arguments.',
createElement('h1', 'Headline as a child virtual node'),
createElement(MyComponent, {
props: {
someProp: 'This is a prop value'
}
})
]
)
```
See details of the date object in official [doc](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth).
Comments
Post a Comment
please do not enter any spam link in the comment box