Funcțiile shallowRef() și shallowReactive() în Vue 3 în Vue.js & Nuxt

Ce sunt shallowRef() și shallowReactive()

Spre deosebire de ref() și reactive() care convertesc recursiv toate proprietățile și sub-obiectele în proxy-uri reactive profunde, variantele shallow optimizează drastic performanța urmărind exclusiv modificările la nivel de rădăcină:

• shallowRef(): devine reactiv doar atunci când schimbați proprietatea .value în întregime, nu la modificarea sub-câmpurilor.
• shallowReactive(): reacționează doar la adăugarea sau modificarea proprietăților directe de nivel 1.

<script setup>
import { shallowRef } from 'vue';

// Nu irosește memorie creând zeci de mii de proxy-uri
const tablouMasiv = shallowRef([]);

async function incarcaDate() {
    const res = await fetch('/api/articole-masive');
    // Reactivitatea se declanșează doar la reatribuirea completă
    tablouMasiv.value = await res.json();
}
</script>