Detailed explanation of unref in Vue3 and common usage methods

introduction

In Vue 3,unrefis a very practical tool for unpacking responsive references (refs) and non-referenced values. It allows us to handle different types of values ​​more conveniently, avoiding some common and tedious operations. This article will introduce in detailunrefConcept, usage and actual scenarios.

What is unref?

In Vue 3,refis a basic tool for creating responsive data. userefThe responsive object created needs to be used when accessing its value..valueAttributes.unrefThe function is to simplify this process, whether it is a responsive reference or a normal value, useunrefAll can directly obtain their original value.

Introduced

To useunref, you need tovueImport it in the package:

import { unref } from 'vue';

The basic usage of unref

Example

Here is a simple example showing how to useunref：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update message</button>
  </div>
</template>

<script>
import { ref, unref } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    const updateMessage = () => {
      // Use unref to get the original value      const currentMessage = unref(message);
      (currentMessage);
       = 'The message has been updated!  ';
    };

    return {
      message,
      updateMessage,
    };
  },
};
</script>

In this example,unrefUsed to obtainmessageThe original value of  simplifies the access process.

The characteristics of unref

• Automatically determine type：unrefCan handle responsive references and non-referenced values. If one is passedref, it will return.valuevalue; if a normal value is passed in, the value will be returned directly.

• Simplify the code:useunrefIt can avoid multiple uses when processing responsive objects..value, make the code more concise.

• Compatible with responsive systems: In Vue 3's responsive system,unrefProvides a consistent way to access values, regardless of whether these values ​​are responsive or not.

Common usage

1. Use in Computational Properties

In computed properties, multiple responsive references are usually required to be processed. useunrefIt can make the calculation logic clearer.

import { ref, computed, unref } from 'vue';

const valueA = ref(10);
const valueB = ref(20);

const sum = computed(() => {
  return unref(valueA) + unref(valueB);
});

2. Process responsive data in the method

In some cases, we may pass responsive data as arguments to the function.unrefMake it easy to access the original value inside the function.

const logValue = (val) => {
  const value = unref(val);
  (value);
};

logValue(message);

3. Processing component props

When props is a responsive object, useunrefIt is convenient to access their values ​​inside the component.

props: {
  data: {
    type: Object,
    required: true,
  },
},
setup(props) {
  const rawData = unref();
  (rawData);
}

Summarize

This is the article about the detailed explanation and common use of unref in Vue3. For more detailed explanation of unref in Vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!