How does data flow between components in a Vue.js app?
In Vue.js, the data is passed to child components from the parent component using a prop or a custom attribute. This custom attribute becomes a property on the child component instance. This procedure is called a one-way data flow.
Once the parent component updates a prop value, the child component is automatically updated. The child component can communicate back to the parent via an event, but mutating a property inside a child component should not be done. It does not affect the parent component also unless it is an object or array. When the child component instance emits an event, the parent assigns a handler to that event, and data is passed back to the parent.
How can you deploy the Vue.js application?
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.
How can you install Vue.js in your project?
You can install Vue.js in your project by using the following 4 methods:
Yu can use CDN by including tag in HTML file.
You can install Vue.js by using Node Package Manager (NPM).
You can install Vue.js using Bower.
You can also use Vue-cli to setup your project.
What is a single-file component in Vue.js?
In Vue.js, a single-file component is a file with a .vue extension that contains a Vue component. The single-file component consists of the component’s template, logic, and styles, all bundled together in one file. It also contains one block, optional and blocks, and possible additional custom blocks.
What do you understand by components props in Vue.js?
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: ‘
{{ postTitle }}
‘
})
Explain the all life cycle events or hooks in Vue instance in Vue.js. / Explain the Life cycle of Vue Instance with diagram.
When a Vue instance is created in Vue.js, it goes through a series of steps after creation. First, they are created then mounted and after that destroyed at the end. In this process, it also runs functions known as life cycle hooks. These life cycle hooks allow the developers to add their own code at a specific stage.
Following is the list of all events or hooks a Vue instance goes through:
beforeCreate event: This is the first event or hook that occurs in the creation process. It facilitates developers to perform actions even before the component has been added to the DOM. We cannot access the DOM inside of this event.
created event: This event is used to run the code after creating the instance. It facilitates you to access the reactive data, but the mounting or rendering of templates and Virtual DOM is not completed yet.
beforeMount event: The beforeMount event is used to execute just before the initial render happens and after the template or render functions have been compiled. This is the rarely used event, and in most cases, you don’t need to use this event.
mounted event: This is the most frequently used event or hook. In this event, you have full access to the reactive component, templates, and rendered DOM.
beforeUpdate event: This event is executed just before the data changes on the component and the update cycle’s start. It runs right before the DOM is patched and re-rendered.
updated: This event is used to execute after the data changes on the component and the DOM re-renders. If you want to access the DOM after a property change, it is the best place to complete this action.
beforeDestroy: This event is used to execute just before tearing down the instance. This is the second last step of the Vue Instance life process and is the right place to clean up events or reactive subscriptions if you have to do this.
destroyed: This is the last step of the Vue Instance life process and used to do any last minute clean up.
What is Vue-loader in Vue.js?
The Vue-loader is a loader module for webpack in Vue.js that is used to write single file components using the .vue file format.
The single-file component contains three sections called template, script, and style. The webpack can extract and process each section using separate loader modules such as the SASS or SCSS loaders. The vue-loader module makes static assets to be treated as module dependencies and enables processing using webpack loaders.
How can you create an instance of Vue.js?
You can create a new Vue instance by using the Vue function:
var vm = new Vue({
// options
})
You have to create a new Vue instance when you want to start a Vue application.
How to use a single-file component in Vue.js?
To use a single-file component in Vue.js, we have to set up Vue Loader for parsing the file (It is done automatically as a part of a webpack building pipeline). It also supports non-default languages such as Sass or HTML templating languages with pluggable pre-processors.
What is the requirement of Mixins in Vue.js?
Mixins in Vue.js are a set of defined logic that is stored in a particular way. Mixins can be re-used repeatedly to add functionality to your Vue instances and components. Mixins are important because they provide a lot of functionalities. Following is the list of features that Mixins provide:
- Mixins facilitate you to easily adhere to the DRY principle and ensure that you do not repeat yourself.
- Mixins provide great flexibility.
- Mixin contains options for Vue components.
- You can use Mixins in Vue.js safely because they do not affect changes outside their defined scope.
- Mixins in Vue.js provide a great platform for code reusability.