Vue.js Instance

The Vue Instance is the core of every Vue application. Whenever you create a Vue app using Vue.createApp(), you’re creating an instance that controls a part of the DOM. This instance is responsible for handling data, methods, lifecycle hooks, template rendering, and reactivity.

What is a Vue Instance?

A Vue instance is essentially the heart of a Vue application. When you call Vue.createApp() in Vue 3, you create a root instance that manages the DOM section it’s mounted on.

In the example above, Vue is handling the variable and rendering it reactively. If the value changes, Vue automatically updates the DOM.

Creating a Vue Instance

In Vue 3, you use Vue.createApp() to create a new instance. Here’s the simplest syntax:

const app = Vue.createApp({
  data() {
    return {
      message: "Hello from Vue instance"
    };
  }
});

app.mount("#app");

- data() is a function that returns an object containing all reactive properties. - mount("#app") tells Vue which DOM element to control.

Example: Reactive Counter

When you click the button, Vue updates count and re-renders the DOM automatically. This demonstrates the **reactivity system** of Vue instances.

Data and Methods

A Vue instance can also define methods alongside data. Methods are functions bound to the instance that can be called in templates.

In the above example, the method sayHello is executed when the button is clicked. Vue binds this correctly to the instance, so you can access data and other methods.

Lifecycle of a Vue Instance

Every Vue instance goes through a series of **lifecycle stages** from creation to destruction. Vue provides **lifecycle hooks** to run custom logic at specific stages.

• beforeCreate – Called before the instance is initialized.
• created – Called after data and methods are available.
• beforeMount – Runs before mounting the template.
• mounted – Runs after the template is rendered to the DOM.
• beforeUpdate – Runs before the DOM is patched when reactive data changes.
• updated – Runs after the DOM is updated.
• beforeUnmount – Runs before unmounting the component.
• unmounted – Runs after the component is removed from the DOM.

Example showing mounted hook:

Multiple Vue Instances

You can create multiple Vue instances on the same page. Each instance manages its own data and DOM section independently.

Both instances are completely independent, which is helpful when you want to isolate functionality in different areas of a web page.

Instance Properties

Vue instances expose several useful properties:

• this.$data – Access to reactive data.
• this.$el – The root DOM element controlled by the instance.
• this.$refs – References to DOM elements/components.
• this.$watch – Allows watching a data property for changes.

Example: Watching Data

Key Takeaways

• The Vue instance is the foundation of every Vue app.
• Vue.createApp() is used in Vue 3 to initialize an instance.
• Data and methods defined in the instance are reactive and bound to the DOM.
• Lifecycle hooks allow you to run logic at specific points in a component’s life.
• Multiple Vue instances can coexist on the same page.

Mastering the Vue instance is the first step to understanding how Vue works under the hood. Everything else in Vue—components, directives, reactivity—builds upon this foundation.