Application and component instances

The root component

The root component is configured by all the options that are passed to createApp. Whenever the application is mounted, that component is used for rendering purposes. Any application before use needs to be mounted into the DOM element. Let’s say if any Vue application needs to be mounted into <div id= “app”> </div>, then we need to pass #app. 

const RootComponent = {
  /* options */
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

You can also try this code with Online Javascript Compiler

Run Code

Unfollowing the other application methods, the mount does not return the application. Instead, it is more interested in returning the root component. Vue’s design was partly inspired by the MVVM’s pattern. Vm is generally used as a convention for short view model and it refers to a component instance. As all the examples taken in this article are single component but many real applications are arranged in the form of a real, nested and reusable component. Let’s take a look at an example of todo applications tree for better understanding.

Here, every component is having its own component instance. For some components like: TodoItem, there are multiple instances which are rendered at a particular time. But all the component instances of this application will share the same application instance.

Note: root component is same just like any other component. There is no difference between them. The configurations options are same just like the corresponding component instance.

Component instance properties

In the previous articles we have covered data properties. Component instances are expose the data properties.

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

You can also try this code with Online Javascript Compiler

Run Code

Various other component options are also available that adds user-defined properties to the component instances like: methods, props, computed, inject and setup. All the properties of the component instance, however they are defined, will be present and accessible in the component’s template. Some built-in properties are exposed by the vue through the component instance like $attrs and $emit. As we can notice, these properties have a $ in their names to avoid conflict between user-defined property names.

Lifecycle hooks

During the creation of component instances, they undergo through a series of initialization steps. For example,data needs to be set up for observation, template is compiled, instance is mounted to the DOM, and DOM updation. Along with this, many more functions are also called like: lifecycle hooks, which allows all the users to add their own code at specific stages.

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

You can also try this code with Online Javascript Compiler

Run Code

In the example above, the hook created can be used for running the code after an instance is created. Well, many other hooks are also present which can be called at different stages of instance’s lifecycle like: mounted, updated and unmounted. 

Lifecycle diagram

Let’s learn the entire lifecycle of a Vue application through lifecycle diagram given below. We create an application instance using createApp method and then run the init events and methods that render the components initially. We create an application with a template and then render the web page contents using mount unmount and update methods.

Frequently Asked Questions

Define component instances?

The model elements that represent actual entities of a system as referred component instances. This feature is present in UML modelling. 

Name the method which is used to get a reference to the component instance?

One way is to make use of the return value from calling ReactDOM.render(). The function ReactDOM.render() returns a reference to the top most rendered component.

Name the various types of ReactJS components?

ReactJS components are of two types namely Functional component and Class component.

Conclusion

We have learnt the Vue framework and its components in this article. We discussed how to create an application instance a root component and how to configure it. Now you can create basic Vue applications and mount them.

Hey Ninjas! We hope this blog helped you enhance your knowledge on Vue applications. If you want to learn more, check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems. Do upvote our blog to help the other ninjas grow.

Happy Coding!