Se você conhece Vue.js, então com certeza já se deparou com uma propriedade computada (ou computed property). São métodos que declaramos nos nossos componentes para abstrair expressões mais complexas e que o framework expõe para nós como uma propriedade que acessamos com o this., como o exemplo dessa interpolação de string:

export default {
  data() {
    return {
      nome: 'John',
      sobrenome: 'Doe'
    }
  },
  computed: {
    nomeCompleto() {
      return `${this.nome} ${this.sobrenome}`
    }
  }
}

// this.fullName -> John Doe

Essa propriedade é reativa, ou seja, se uma das duas dependências for alterada, o dado como um todo vai ser atualizado.

E é aqui que eu comecei a me perguntar: como é que Vue conhece as dependências desse método e como sabe quando tem que atualizar seu valor? A princípio, essa resposta é pouco intuitiva.

Meu objetivo é que você termine essa leitura entendendo como a reatividade funciona por debaixo dos panos com a implementação de um sistema de reatividade muito simples.

Esse texto é baseado na documentação do Vue 3 e especialmente no texto Reactivity in Depth, que recomendo fortemente a sua leitura.

O que é a reatividade?

A reatividade é um paradigma de programação declarativo que faz ser possível reagir a mudanças de valores. Isso quer dizer que se o valor nomeCompleto for a concatenação de nome e sobrenome, o seu resultado deve ser atualizado sempre que um desses dois valores mudar.

Entretanto, no Javascript a gente não tem essa funcionalidade por padrão:

let nome = 'John'
let sobrenome = 'Doe'

let nomeCompleto = nome + ' ' + sobrenome

console.log(nomeCompleto) // -> John Doe

nome = 'Caio'
sobrenome = 'Ferrarezi'

console.log(nomeCompleto) // -> John Doe

O valor final da variável nomeCompleto não é atualizado porque não dissemos ao Javascript para fazê-lo. Isso é o que é chamado de programação imperativa, devemos dar as instruções precisas para a máquina fazer o que a gente quer.

Como fazer reatividade no Javascript?

Para isso, nós temos que cumprir três etapas:

1. Rastrear quando um valor lido (em uma função por exemplo);
2. Detectar quando esse valor for alterado; e
3. Executar novamente o código que lê esse valor.

Antes de começar, vale a pena explicar que não conseguimos gerar reatividade com variáveis que guardam valores primitivos (string, number, boolean e etc), devemos usar estruturas como os objetos.

Isso acontece porque quando os valores do tipo Object são passados a frente, são suas referências que são mandadas e não suas cópias, ou seja, se alterarmos seus valores, isso acontecerá diretamente no espaço de memória onde estão alocados.

Rastreando um valor

O Vue usa uma API do Javascript chamada Proxy que foi trazida com a versão do ES6 (ou ES2015). Essa funcionalidade permite que a gente defina comportamentos customizados para operações de leitura, escrita e etc de um objeto.

Vamos começar criando um estado para o nosso sistema, bastando instanciar um novo objeto proxy:

const estado = new Proxy({
  nome: 'John',
  sobrenome: 'Doe'
})

Para poder interceptar as operações do nosso objeto, criamos então os manipuladores (ou handlers) que contêm os métodos que fornecem acesso às propriedades:

const manipuladores = {
  get(objeto, chave) {
    return objeto[chave]
  },
  set(objeto, chave, valor) {
    objeto[chave] = valor
  }
}

E então podemos passar os manipuladores para o construtor da proxy:

const estado = new Proxy({
  nome: 'John',
  sobrenome: 'Doe'
}, manipuladores)

Até aqui nada demais. Se tentarmos acessar e modificar as propriedades do nosso estado, essas operações serão feitas normalmente:

console.log(estado.nome) // -> John

estado.nome = 'Caio'

console.log(estado.nome) // -> Caio

Para poder rastrear uma propriedade lida do estado, vamos criar a função rastreia que vai guardar dentro de um WeakMap a referência ao objeto original que passamos na proxy e, futuramente, suas dependências. A implementação é bem simples, começando com a instância de uma nova estrutura de dados.

const mapaDeObjetos = new WeakMap()

Você deve estar se perguntando o porque de usar o WeakMap. Essa estrutura de dados (que também foi introduzida com o ES6) permite que guardemos um par chave-valor com diferencial de que essa chave pode ser um objeto (no nosso caso o objeto original do estado), função ou outra estrutura mais complexa.

Continuando, precisamos implementar a função rastreia. Inicialmente, vamos procurar pelo valor referente ao objeto no mapaDeObjetos e se ele não existir, criá-lo:

function rastreia(objeto, chave) {
  let mapaDeDependencias = mapaDeObjetos.get(objeto)

  if (!mapaDeDependencias) {
    mapaDeDependencias = new Map()

    mapaDeObjetos.set(objeto, mapaDeDependencias)
  }
}

O mapaDeDependencia que foi criado, é onde vamos guardar futuramente as dependências das propriedades do estado, mas falaremos delas mais profundamente daqui a pouco. O que precisamos saber agora é que esse mapa vai guardar uma coleção de dados que não podem ser iguais entre si, por isso vamos usar a estrutura de dados Set:

function rastreia(objeto, chave) {
  // ...

  let dependencias = mapaDeDependencias.get(chave)

  if (!dependencias) {
    dependencias = new Set()

    mapaDeDependencias.set(chave, dependencias)
  }
}

Agora temos o caminho para poder ler e guardar as dependências de uma propriedade.

Como detectar um valor lido em uma função?

Para detectar quando um valor é lido em uma função e torná-la uma dependência de uma propriedade, precisamos sincronizar o exato momento em que esse código estiver rodando com a leitura da propriedade do estado.

Vamos criar uma função que terá a responsabilidade de expor uma outra função (que chamaremos de efeito) que lê valores da proxy.

Começamos criando uma variável que vai expor o efeito globalmente:

let efeitoAtivo = null

A função criaEfeito é quem vai manipular a variável que acabamos de criar. Ela vai receber um efeito, expor e executar esse código:

function criaEfeito(efeito) {
  efeitoAtivo = efeito

  efeito()

  efeitoAtivo = null
}

A ideia de executar o efeito assim que é exposto é para que as propriedades que ele lê saibam da sua existência, criando o momento de sincronia entre efeito ativo e leitura das propriedades que falamos acima.

Para deixar a ideia mais clara, vamos então criar um efeito que vai sempre logar a concatenação entre estado.nome e estado.sobrenome:

criaEfeito(() => console.log(`${estado.nome} ${estado.sobrenome}`))

Mas se você estiver atento, vai notar que a ainda falta adicionar esse efeito à nossa coleção de dependências das propriedades. Isso é bem simples, basta alterar a função rastreia para que ao fim ela adicione o efeito ativo ao Set de dependências:

function rastreia(objeto, chave) {
  // ...

  if (efeitoAtivo) {
    dependencias.add(efeitoAtivo)
  }
}

Por fim, alteramos o manipulador get para chamar a função rastreia:

const manipuladores = {
  get(objeto, chave) {
    rastreia(objeto, chave)

    return objeto[chave]
  },
  // ...
}

Vamos resumir o que fizemos até esse momento do código:

• Criamos um estado (proxy) com as propriedades nome e sobrenome;
• Criamos um efeito que loga a concatenação entre essas duas propriedades;
• Quando o efeito é criado, ele é exposto globalmente;
• Quando o efeito é executado, ele lê estado.nome e estado.sobrenome;
• O acesso a essas propriedades chama o manipulador get de cada uma; e
• O get chama a função rastreia que guarda o efeito ativo em uma coleção atrelada à propriedade lida.

Sabendo as dependências de cada propriedade, agora é possível executá-las toda vez que um valor for alterado.

Detectando uma alteração

Detectar uma alteração em uma das propriedade do estado é muito fácil, na verdade, já estamos fazendo isso. Essa responsabilidade está com o manipulador set da proxy. Toda vez que alteramos o valor tanto de estado.nome, quanto de estado.sobrenome, esse manipulador é chamado e a propriedade é atualizada.

Agora que já sabemos que o objeto proxy já está cuidando das alterações, falta apenas um item da lista para ter o nosso sistema de reatividade funcionado: executar novamente as dependências.

Executando as dependências

Para chamar as dependências da propriedade que está sendo alterada, vamos alterar o modificador set para chamar a função executa logo depois de atribuir uma novo valor:

const manipuladores = {
  // ...
  set(objeto, chave, valor) {
    objeto[chave] = valor

    executa(objeto, chave)
  }
}

A implementação dessa função é bem tranquila também, ela vai buscar o mapa de dependências que relacionado ao objeto original que usamos para criar a proxy. Se ele existir, será feita uma busca pela coleção de dependências da propriedade alterada e cada efeito ali presente será executado:

function executa(objeto, chave) {
  const mapaDeDependencias = mapaDeObjetos.get(objeto)

  if (mapaDeDependencias) {
    const dependencias = mapaDeDependencias.get(chave)

    dependencias.forEach(efeito => efeito())
  }
}

Antes de terminar, podemos fazer uma pequena otimização na chamada da função executa. É possível verificar se o valor antigo e o valor atual da propriedade são iguais e então ignorar a execução das dependências, já que na prática, ainda que o manipulador tenha sido chamado, os valores não foram alterados:

const manipuladores = {
  // ...
  set(objeto, chave, valor) {
    const valorAntigo = objeto[chave]

    objeto[chave] = valor

    if (valorAntigo !== valor) {
      executa(objeto, chave)
    }
  }
}

Com essa implementação simples de um paradigma reativo, se estado.nome ou estado.sobrenome forem alterados, o log da concatenação desses valores será executado automagicamente:

estado.nome = "Caio" // -> Caio Doe
estado.sobrenome = "Ferrarezi" // -> Caio Ferrarezi

estado.nome = "Caio" // Não executa a dependência!

Código Final

É claro que o Vue é muito mais robusto do que o vimos aqui. Inclusive, encorajo muito um passeio pelo código fonte da biblioteca (especialmente a API de reatividade) para tentar visualizar o conceitos que abordamos de forma mais simple aqui.

Por fim, o código que geramos está na íntegra aqui:

let efeitoAtivo = null

const mapaDeObjetos = new WeakMap()

function criaEfeito(efeito) {
  efeitoAtivo = efeito

  efeito()

  efeitoAtivo = null
}

function rastreia(objeto, chave) {
  let mapaDeDependencias = mapaDeObjetos.get(objeto)

  if (!mapaDeDependencias) {
    mapaDeDependencias = new Map()

    mapaDeObjetos.set(objeto, mapaDeDependencias)
  }

  let dependencias = mapaDeDependencias.get(chave)

  if (!dependencias) {
    dependencias = new Set()

    mapaDeDependencias.set(chave, dependencias)
  }

  if (efeitoAtivo) {
    dependencias.add(efeitoAtivo)
  }
}

function executa(objeto, chave) {
  const mapaDeDependencias = mapaDeObjetos.get(objeto)

  if (mapaDeDependencias) {
    const dependencias = mapaDeDependencias.get(chave)

    dependencias.forEach(efeito => efeito())
  }
}

const manipuladores = {
  get(objeto, chave) {
    rastreia(objeto, chave)

    return objeto[chave]
  },
  set(objeto, chave, valor) {
    const valorAntigo = objeto[chave]

    objeto[chave] = valor

    if (valorAntigo !== valor) {
      executa(objeto, chave)
    }
  }
}

const estado = new Proxy({
  nome: 'John',
  sobrenome: 'Doe'
}, manipuladores)

criaEfeito(() => console.log(`${estado.nome} ${estado.sobrenome}`))

estado.nome = "Caio"
estado.sobrenome = "Ferrarezi"

estado.nome = "Caio"

Referências

• [Palestra] Unlocking the Power of Reactivity with Vue 3 - Oscar Spencer
• [Documentação] Reactivity in Depth
• [Código Fonte] Vue Reactivity API