🤔 Quando não usar reactive()?

Em algumas situações, você pode não precisar de reatividade para um objeto e, nesses casos, pode criar um objeto simples sem usar o reactive(). Isso é útil quando você tem um objeto cujas propriedades não vão mudar e não precisam ser observadas pelo Vue.

Criando um objeto simples sem reatividade

Quando você cria um objeto simples em JavaScript, ele não é reativo. Ou seja, se você mudar as propriedades desse objeto, o Vue não irá refletir essas alterações automaticamente na interface.

Exemplo de objeto simples:

const pessoa = {
  nome: 'Lucas',
  idade: 23
}

Neste caso, o objeto pessoa é estático, ou seja, não será reativo. Se você mudar o valor das suas propriedades diretamente, o Vue não vai atualizar automaticamente a UI.

Garantindo que o objeto não seja modificado

Se você quiser garantir que o objeto não seja alterado acidentalmente, pode usar o Object.freeze(). Isso torna o objeto imutável — ou seja, suas propriedades não podem ser modificadas depois que o objeto é criado.

Exemplo com Object.freeze():

const pessoa = Object.freeze({
  nome: 'Lucas',
  idade: 23
})

Neste caso, pessoa é imutável. Tentar modificar qualquer propriedade de pessoa resultará em erro no modo estrito (se estiver ativado) ou simplesmente será ignorado. Além disso, o Vue não observará mudanças neste objeto, já que ele não é reativo.

Resumo

  • Objeto simples: Se não precisa de reatividade, crie o objeto normalmente, sem usar reactive().
  • Imutabilidade: Para garantir que o objeto não seja alterado, use Object.freeze().
  • Reatividade: Se precisar que o objeto seja reativo, utilize reactive() ou ref().

Essas abordagens ajudam a controlar quando a reatividade do Vue é necessária e quando você pode optar por objetos simples sem essa sobrecarga.