Já enfrentou perda de reatividade no Vue?
sobes.tech IA
Resposta da IA
Sim, já experienciei isso. A perda de reatividade no Vue 2 ocorria principalmente em dois casos:
- Adicionar uma nova propriedade diretamente a um objeto existente. O Vue 2 só rastreia alterações em propriedades que estavam presentes no objeto no momento da sua criação.
- Modificar um array por índice ou alterar o seu comprimento. O Vue 2 não conseguia rastrear essas alterações de forma reativa diretamente.
Para resolver esses problemas, utilizavam-se os métodos $set para objetos e métodos mutadores de arrays (push, pop, shift, unshift, splice, sort, reverse) ou métodos baseados em splice para substituir elementos/mudar o comprimento.
// Perda de reatividade ao adicionar uma propriedade
const obj = { a: 1 };
// obj.b = 2; // Não reativo no Vue 2
// Solução com $set
// Vue.$set(obj, 'b', 2);
// Perda de reatividade ao modificar um array por índice
const arr = [1, 2, 3];
// arr[0] = 4; // Não reativo no Vue 2
// Solução com métodos mutadores
// arr.splice(0, 1, 4);
// Solução com $set para arrays (menos comum, mas possível)
// Vue.$set(arr, 0, 4);
No Vue 3, usando a API Composition e reactive/ref, além de um motor reativo baseado em proxies melhorado, esses problemas são amplamente resolvidos. Adicionar propriedades a objetos reativos e modificar arrays por índice ou comprimento tornam-se reativos por padrão.
// Vue 3
import { reactive } from 'vue';
const obj = reactive({ a: 1 });
obj.b = 2; // Reativo no Vue 3
const arr = reactive([1, 2, 3]);
arr[0] = 4; // Reativo no Vue 3
arr.length = 1; // Reativo no Vue 3
No entanto, compreender as razões da perda de reatividade no Vue 2 é útil ao trabalhar com código legado ou ao fazer a transição entre versões.