Example of using ref function in Vue3's combined API

Have you heard of Vue3's combination API? It is a new way of playing Vue3, converting the previous Vue2 component functions into function components. OK, today I want to share with you how to use the ref() function in the combinatorial API.

First of all, the ref() function is used to create reactive data. Its function is like you label a variable so that Vue can know the location of the variable. Next, let’s take a look at a few examples!

First, let's take a look at how to create a responsive variable using the ref() function in the combinatorial API. The code is as follows:

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="changeMessage">Change message</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const message = ref('Hello, world!');  
    function changeMessage() {  
       = 'Hello, Vue3!';  
    }  
    return {  
      message,  
      changeMessage,  
    };  
  },  
};  
</script>

In this example, we use the ref() function to create a responsive variable named message and define it in the component's setup function. Then, we use { in the template{ message }} to display the value of this variable. When the button is clicked, we call the changeMessage function to change the value of the message. This is the basic usage of the ref() function.

Next, let's take a look at how to use the ref() function in the combinatorial API to create an array. The code is as follows:

<template>  
  <div>  
    <ul>  
      <li v-for="item in items" :key="">{{  }}</li>  
    </ul>  
    <button @click="addItem">Add item</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const items = ref([  
      { id: 1, name: 'Apple' },  
      { id: 2, name: 'Banana' },  
      { id: 3, name: 'Orange' },  
    ]);  
    function addItem() {  
      ({ id:  + 1, name: 'Vue3' });  
    }  
    return {  
      items,  
      addItem,  
    };  
  },  
};  
</script>

In this example, we use the ref() function to create a responsive array named items and define it in the component's setup function. Then, we use the v-for directive in the template to iterate through this array and display the name of each element. When the button is clicked, we call the addItem function to add a new element to the array. This is how to create an array using the ref() function in the combinatorial API.

Finally, let's take a look at how to use the ref() function in the combinatorial API to create an object. The code is as follows:

<template>  
  <div>  
    <p>{{  }}</p>  
    <p>{{  }}</p>  
    <button @click="changePerson">Change person</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const person = ref({ name: 'Vue2', age: 2 });  
    function changePerson() {  
       = 3;  
       = 'Vue3';  
    }  
    return {  
      person,  
      changePerson,  
    };  
  },  
};  
</script>

In addition to the above, there are some other uses, such as:

Create reactive objects using ref function in setup function

<template>  
  <div>  
    <p>{{  }}</p>  
    <p>{{  }}</p>  
    <button @click="changePerson">Change person</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const person = ref({ name: 'Vue2', age: 2 });  
    function changePerson() {  
       = 3;  
       = 'Vue3';  
    }  
    return {  
      person,  
      changePerson,  
    };  
  },  
};  
</script>

In the component's setup function, use the ref function to create a responsive variable, and use it to initialize a variable, and then use this variable in the template. This usage makes it easier for you to use variables without manually labeling the ref.

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="changeMessage">Change message</button>  
  </div>  
</template>  
<script>  
import { ref } from 'vue';  
export default {  
  setup() {  
    const message = ref('Hello, world!');  
    function changeMessage() {  
       = 'Hello, Vue3!';  
    }  
    return {  
      message,  
      changeMessage,  
    };  
  },  
};  
</script>

In the component's setup function, use the ref function to create a responsive variable, and use it to initialize an array, and then iterate through the array using the v-for directive in the template. This usage can make your code more concise and clear.

<template>  
  <div>  
    <ul>  
      <li v-for="item in items" :key="">{{  }}</li>  
    </ul>  
    <button @click="addItem">Add item</button>  
  </div>  
</template>

In Vue3's combined API, ref() function is used to create responsive variables, arrays, objects, etc., which can be completed in the component's setup function and then returned to the template for use. Using the ref() function can make variables, arrays, objects, etc. more convenient to use in components, and can also ensure that they are responsive.

This is the article about how to use the ref() function in Vue3's combined API. For more related contents of using the ref() function in Vue3's combined API, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!