Vue.js Instance

What is an instance in Vue.js?

An instance in Vue.js refers to a new object created using the Vue constructor. Each instance represents a Vue component or application and has its own data, methods, and lifecycle hooks. Instances can be created using the new Vue() syntax.

How do you create a new Vue instance?

You can create a new Vue instance by using the new Vue() constructor and passing an options object that specifies the properties, methods, and other configurations.

const app = new Vue({
  el: '#app', // Mounting point in the DOM
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

What are the properties of a Vue instance?

A Vue instance has several built-in properties, including:

• el: The DOM element that the Vue instance is mounted to.
• data: The data object that contains the reactive properties for the instance.
• methods: An object containing methods that can be called in the template or other methods.
• computed: An object for computed properties that depend on reactive data.
• watch: An object for watching specific data properties for changes.
• mounted: A lifecycle hook called after the instance has been mounted to the DOM.

What is the difference between a Vue instance and a Vue component?

A Vue instance is the core object created using the Vue constructor, which can represent a whole application or a single component. A Vue component is a reusable instance of the Vue object that encapsulates its own template, data, methods, and lifecycle hooks. Components are created from Vue instances and can be used to compose the application.

// Example of a Vue component
Vue.component('my-component', {
  template: 'Hello from My Component!',
  data() {
    return {
      componentMessage: 'Hello from component data!'
    };
  }
});

// Creating a Vue instance that uses the component
const app = new Vue({
  el: '#app'
});

How do you access instance properties and methods in Vue.js?

You can access instance properties and methods using the this keyword within the instance. This allows you to refer to the instance's data, computed properties, methods, and lifecycle hooks.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    greet() {
      console.log(this.message); // Accessing instance property
    }
  }
});

app.greet(); // Outputs: Hello, Vue!

What are lifecycle hooks in a Vue instance?

Lifecycle hooks are special functions that are called at specific stages of a Vue instance's lifecycle. They allow developers to execute code at different points, such as when the instance is created, mounted, updated, or destroyed. Common lifecycle hooks include:

• created: Called after the instance is created but before it is mounted.
• mounted: Called after the instance is mounted to the DOM.
• updated: Called after data changes and the DOM is re-rendered.
• beforeDestroy: Called right before the instance is destroyed.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('Instance created!');
  },
  mounted() {
    console.log('Instance mounted!');
  }
});

How do you pass data to a Vue instance?

You can pass data to a Vue instance by defining the data property in the options object when creating the instance. The data object contains properties that are reactive and can be used within the template or methods of the instance.

const app = new Vue({
  el: '#app',
  data: {
    title: 'Welcome to Vue.js'
  },
  template: '<h1>{{ title }}</h1>'
});

What is the purpose of the mounted lifecycle hook?

The mounted lifecycle hook is called after the Vue instance has been mounted to the DOM. It is commonly used to perform operations that require access to the DOM, such as fetching data from an API or manipulating DOM elements directly.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Data will be fetched!'
  },
  mounted() {
    // Fetch data from an API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.message = data.message; // Update instance data
      });
  }
});

How do you destroy a Vue instance?

You can destroy a Vue instance using the .$destroy() method. This method cleans up the instance, removing all event listeners and child components, allowing for better memory management.

const app = new Vue({
  el: '#app'
});

// Later in your code
app.$destroy(); // Destroys the Vue instance