Analysis of usage scenarios of shallowReactive and shallowRef

In Vue,shallowReactiveandshallowRefAre two for creationshallow responsive dataAPI. They are withreactiveandref Similar, but behaves differently when dealing with nested objects. Below are detailed interpretations and examples of them.

1. shallowReactive

effect

shallowReactiveCreate a shallow responsive object. Only the top-level properties of the object are responsive, and the properties of nested objects are not converted to responsive.

Use scenarios

• When you only need the top-level properties of an object to be responsive and don't care about the responsiveness of nested objects.
• When responsive transformations of nested objects can bring performance overhead.

Example

import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  ('foo changed:', ); // Responsive});
effect(() => {
  (' changed:', ); // Non-responsive});
 = 10; // Trigger the first effect = 20; // The second one will not be triggered effect

explain:

• It is responsive, modifying it will trigger dependency updates.
• It is not responsive, modifying it will not trigger dependency updates.

2. shallowRef

effect

shallowRefCreate a shallow layerResponsive citations,only.valueThe attribute itself is responsive, and.valueInternal properties will not be converted to responsive.

Use scenarios

• When you just need.valueIt is responsive, not caring.valueWhen the internal attributes are responsive.
• when.valueis a complex object and does not require deep listening.

Example

import { shallowRef, effect } from 'vue';
const count = shallowRef({
  value: 1,
});
effect(() => {
  ('count changed:', ); // Non-responsive});
 = 10; // Effect will not be triggered = { value: 20 }; // trigger effect

explain:

• It is responsive, modifying it will trigger dependency updates.
• Not responsive, but directly modifiedDependency update will be triggered.

3. shallowReactiveandshallowRefThe difference

4. shallowReactiveandreactiveComparison

reactiveDeep responsiveness

import { reactive, effect } from 'vue';
const state = reactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  (' changed:', ); // Responsive});
 = 20; // trigger effect

reactiveThe entire object and its nested properties will be converted into responsive.

shallowReactiveshallow responsiveness

import { shallowReactive, effect } from 'vue';
const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2,
  },
});
effect(() => {
  (' changed:', ); // Non-responsive});
 = 20; // Will not trigger effect

shallowReactiveOnly convert the top-level attributes to responsiveness, and the nested attributes remain unchanged.

5. shallowRefandrefComparison

refDeep responsiveness

import { ref, effect } from 'vue';
const count = ref({
  value: 1,
});
effect(() => {
  (' changed:', ); // Responsive});
 = 10; // trigger effect

refWill be.valueIts internal properties are converted into responsive forms.

shallowRefshallow responsiveness

import { shallowRef, effect } from 'vue';
const count = shallowRef({
  value: 1,
});
effect(() => {
  (' changed:', ); // Non-responsive});
 = 10; // Effect will not be triggered = { value: 20 }; // trigger effect

shallowRefOnly.valueIt is converted into responsive, and the internal properties remain unchanged.

6. Summary of usage scenarios

shallowReactive

• Suitable for objects that only require top-level attribute responsiveness.
• For example: the top-level field of form data.

shallowRef

• Suitable for only needed.valueResponsive reference.
• For example: a reference to a DOM element or an object that does not require deep listening.

7. Things to note

Performance optimization：

shallowReactiveandshallowRefIt can reduce unnecessary responsive conversions, thereby improving performance.

Responsiveness of nested objects：

If you need responsiveness of nested objects, you should usereactiveorref。

.valueUse of:

shallowRefof.valueIt is responsive, but.value The internal properties are not responsive.

8. Summary

• shallowReactiveandshallowRefIt is a shallow responsive API provided by Vue 3.
• shallowReactiveOnly convert the top-level properties of the object into responsiveness.
• shallowRefOnly.valueConvert itself to responsive.
• They are suitable for scenarios where performance is required or that are not required for deep responsiveness.

Through reasonable useshallowReactiveandshallowRef, can optimize the performance of Vue applications while ensuring functions.

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