Detailed explanation of ref in vue3

ref()

Accept a value and return a responsive, modifiable ref object, there is only one.vauleproperty.

Ref object can be passed.valueThe properties are modified, and the modified values ​​are also responsive, and related side effects will be triggered after modification.

If an object is assigned to a ref, the object will be converted into a deep responsive object through reactive().

For objects whose attribute value is a ref object, it also has a responsive form after deconstruction.

1. Ref automatically unpacks in templates

When ref is used as a top-level property in a template, it will be automatically unpacked without.valueGet the value.

const count = ref(1);
 = 2;

Use directly

<!-- countThe value is2 -->
<div>{{count}}</div>
<!-- correct -->
<div>{{count + 1}}</div>

If it is not a top-level attribute, if the value requires logical operation, a problem will occur.

const obj = {
    age: ref(1)
}

<!-- Can display normally-->
<div>{{}}</div>
<!-- Will report an error  The rendering result will be a [object Object]，because  It's one ref Object。need Only display normally-->
<div>{{ + 1}}</div>

Deconstructed also has responsiveness

const {age} = obj;

2. Unpacking of ref in responsive object

A ref object is nested in a responsive object and will be automatically unpacked when the property is accessed.

const a = ref(1)
const state = reactive({
    age: a
})
(); // 1 Unpack directly，Need not

If a new ref is assigned to another object with a ref attribute, it replaces the old ref.

const b = ref(3);
// If b is assigned directly to, because b is a ref object, it will replace the previous ref object. Now, no matter how it changes, the variable a has nothing to do with it. = b;
(); // 3
(a); // 1
// If the assignment is actually equivalent to a value and is not a ref object, it will not replace the previous ref object, and then the previous variable a will also change accordingly. = ;
(); // 3
(a); // 3

Ref unpacking occurs only when nested within a deep responsive object. It is not unpacked when it is accessed as a property of a shallow responsive object.

3. Ref unpacking of array and collection types

Unlike responsive objects, when ref is used as a responsive array or likeMapWhen elements of this native collection type are accessed, they will not be unpacked.

const books = reactive([ref('Vue 3 Guide')])
// .value is required here(books[0].value)
const map = reactive(new Map([['count', ref(0)]]))
// .value is required here(('count').value)

Summarize

Returns a ref object with responsiveness and only one property.valueAvailable.valueGet or modify the value. Automatic unpacking in templates, for objects to be used in templates, logical operations are required.value. The deconstructed also has responsiveness. For responsive objects, it can be unpacked. When one ref object is assigned to another ref object, the old ref object will be replaced. For responsive arrays, it will not be unpacked.

This is all about this article about ref() in vue3. For more related ref() in vue3, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!