The difference between ref and reactive in vue and description

The difference between vue ref and reactive

Ref and reactive in Vue 3 are both APIs used to create responsive data, but there are obvious differences in data types, usage methods, access methods, design concepts, and application scenarios.

• Data Type: ref is mainly used to define simple types (such as strings, numbers, boolean values, etc.) and a single object, while reactive is used to define complex types, such as JavaScript objects and arrays, etc.;
• How to use: Ref needs to be created and used by using ref directives in templates and ref functions in JavaScript code, while reactive needs to be wrapped and created by calling the provided reactive functions;
• Access methods: For reactive data created through ref function, the actual value needs to be accessed through the .value attribute; for reactive objects created through reactive function, their properties can be directly accessed or their methods can be called;
• Design concept: ref mainly solves the responsive problem of single element/data, while reactive is to solve the responsive problem of complex data structures such as JavaScript objects and arrays;
• Application scenarios:reactive is suitable for creating complex data structures, such as objects, arrays, etc., as well as when attributes need to be added and deleted dynamically. Ref is more suitable for basic type data, such as numbers, strings, etc., as well as when directly accessing and modifying referenced values;

Code example:

Example using ref

<template>  
  <div>  
    <p>Count: {{ count }}</p>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
import { ref } from 'vue';  
  
export default {  
  setup() {  
    // Create a responsive reference using ref    const count = ref(0);  
  
    // Define a method to increase the value of count    const increment = () => {  
      ++;  
    };  
  
    // Return variables and methods that need to be used in the template    return {  
      count,  
      increment  
    };  
  }  
};  
</script>

Examples using reactive

<template>  
  <div>  
    <p>Name: {{  }}</p>  
    <p>Age: {{  }}</p>  
    <button @click="increaseAge">Increase Age</button>  
  </div>  
</template>  
  
<script>  
import { reactive } from 'vue';  
  
export default {  
  setup() {  
    // Create a reactive object using reactive    const state = reactive({  
      name: 'Alice',  
      age: 25  
    });  
  
    // Define a method to increase the value of age    const increaseAge = () => {  
      ++;  
    };  
  
    // Return variables and methods that need to be used in the template    return {  
      state,  
      increaseAge  
    };  
  }  
};  
</script>

Summarize

In the first example, we used a ref to create a responsive reference called count, which is a simple numeric type. In the setup function, we define an increment method to increase the value of count when the button is clicked. In the template we pass {{ count }} directly displays the value of count without the .value prefix required, because Vue's template syntax will automatically handle .value access of ref.

In the second example, we use reactive to create a responsive object named state which contains two properties name and age. The state object itself is a responsive data structure, and we can directly access its properties without the need for an additional .value prefix. In the setup function, we also define an increaseAge method for increasing the value when the button is clicked. In the template we pass {{ }}and{{ }} to display the property value of the state object.

These examples show how to use ref and reactive in Vue 3 setup functions to create and manage reactive data.

Ref and reactive have their own characteristics in Vue 3. The choice of using depends on the type of data and the specific usage scenario. In most cases, you can choose to use reactive or ref according to the characteristics of the data.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.