Defining a component's data

Compare how to define reactive data in Vue.js 3 using Options API's data function and Composition API's ref function.

// Using the Options API in Vue.js 3

Vue.createApp({
  data() {
    return {
      // Reactivity is created for the message property
      message: 'Hello Vue!'
    };
  }
}).mount('#app');

This snippet demonstrates defining reactive data in a Vue.js 3 component using the Options API. A 'data' function is used to return an object where the property 'message' is reactive.

// Using the Composition API in Vue.js 3

const { createApp, ref } = Vue;

createApp({
  setup() {
    // 'message' is a reactive reference, using the ref function
    const message = ref('Hello Vue!');

    // The 'message' ref is returned from the 'setup' function, making it available to the template
    return { message };
  }
}).mount('#app');

This snippet shows how to define reactive data in a Vue.js 3 component using the Composition API. The 'ref' function is used to create a reactive reference to the value 'Hello Vue!', which can be accessed and modified reactively within the component.