
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:

```javascript
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](https://v3.vuejs.org/guide/reactivity.html), 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:

```javascript
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](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/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*:

```javascript
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:

```javascript
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*:

```javascript
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:

```javascript
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.

```javascript
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:

```javascript
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`:

```javascript
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:

```javascript
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:

```javascript
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`:

```javascript
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:

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

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

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

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://github.com/vuejs/vue-next/tree/master/packages/reactivity) 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:

```javascript
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](https://www.youtube.com/watch?v=5HxOx_uyV3A)
- [Documentação] [Reactivity in Depth](https://v3.vuejs.org/guide/reactivity.html)
- [Código Fonte] [Vue Reactivity API](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)


Entendendo a reatividade do Vue com proxies


O `v-model` é uma diretiva do Vue que permite criar uma comunicação de mão dupla (*two-way binding*) automática entre componentes.

Se um valor for passado de um componente pai para um filho com suporte à diretiva, o Vue vai atualizá-lo por debaixo dos panos:

```html
<input type="text" v-model="framework" placeholder="com qual framework você trabalha?">

<p>você trabalha com: {{ framework }}</p>
```

O código acima é um **açúcar sintático**, ou seja, é o mesmo que passar para o elemento a propriedade `value` e atualizar o dado no evento `input`:

```html
<input type="text" :value="framework" @input="framework = $event">
```

## Adicionando o v-model em um componente

Para dar suporte à diretiva, o componente customizado só precisa ter a prop `value` declarada e deve emitir um evento `input` quando o valor for alterado.

A partir da versão 3 do Vue, a prop padrão do `v-model` passou a ser o `modelValue` e o evento `update:modelValue`, mas vamos ver como alterar esse comportamento.

Imagina que você queira componentizar o seu próprio input, como fazer então para que o `v-model` funcione?

```html
<template>
  <input
    type="text"
    class="custom-input"
    :value="text"
    @input="handleInput"
  >
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    value: String // declaração da prop value
  },
  data() {
    return {
      text: this.value // adição do valor inicial da prop na variável text
    }
  },
  watch: {
    value() { // observando para que a atualização da prop reflita no componente
      this.text = this.value
    }
  },
  methods() {
    handleInput(event) {
      const { value } = event.target

      this.$emit('input', value) // emitindo o valor do input alterado
    }
  }
}
</script>
```

Dessa maneira, o seu componente já poderia ser chamado com a diretiva:

```html
<CustomInput v-model="framework" />
```

Mas o Vue também oferece a opção de configurar uma propriedade e um evento para que o `v-model` funcione de forma customizada, é só alterar o objeto `model` da instância do componente:

```javascript
export default {
  name: 'CustomInput',
  model: { // configuração do v-model
    prop: 'modelValue',
    event: 'change'
  }
  props: {
    modelValue: String // nova propriedade
  },
  data() {
    return {
      text: this.modelValue
    }
  },
  watch: {
    modelValue() { // novo observador da propriedade
      this.text = this.modelValue
    }
  },
  methods() {
    handleInput(event) {
      const { value } = event.target

      this.$emit('change', value) // emitindo novo evento
    }
  }
}
```

Pronto! O `input` customizado agora tem suporte a diretiva `v-model` com propriedade e evento customizados.

Como só foi alterado o comportamento interno do componente, a sua chamada (que vimos acima) não será afetada.


Como adicionar o v-model em um componente Vue


## O que é um algoritmo?

Um **Algoritmo** é conjunto de instruções passo a passo com a finalidade de se resolver um determinado problema.

O exemplo mais famoso na vida cotidiana são as receitas. Elas nos dão as instruções necessárias para transformar certos ingredientes em uma comida ou um bolo, por exemplo.

Os humanos têm a capacidade de entender esses processos de maneira mais subjetiva, normalmente temos uma visão geral do problema e isso pode fazer com a gente não siga necessariamente todos os passos de forma exata.

Na computação, o conceito é o mesmo a medida que temos que processar uma entrada para gerar uma saída e resolver um problema, porém as máquinas fazem **exatamente** o que pedimos a elas e para evitar ambiguidade em nosso código, devemos ser mais precisos em nossas instruções.

## Como buscar uma palavra em um dicionário?

Há varias formas de realizar essa busca:

- Buscando a palavra por cada página do dicionário, o que chamamos de **busca linear**;

- Dividir o dicionário ao meio e verificar se a palavra está ali; se não estiver, usamos a **ordenação** alfabética a nosso favor para nos direcionar para a metade em que ela está contida; repetir o mesmo processo até acharmos a palavra;

Essas diferenças nas formas de busca nos ajuda a entender que dependendo da nossa escolha, o **tempo** que levamos para achar uma palavra será diferente.

## Complexidade de Tempo

Computadores possuem capacidades diferentes e podem levar tempos diferentes para processar um mesmo número de instruções. Para medir o tempo de execução de algoritmos, devemos nos livrar dessas interferências e, portanto, o tempo absoluto (hora, minutos, segundos e etc) se torna desinteressante para nos dar essa informação.

Para entender a complexidade de um algoritmo no tempo olhamos, então, para o número de instruções (atribuições, comparações, acessos, operações e etc) relevantes que ele processa.

Vamos a um exemplo:

```javascript
const numeros = [1, 2, 3, 4, 5];

let i = 0; // 1 instrução
let n = numeros.length; // 2 instruções

while(i < n) { // 1 instrução
  numeros[i] *= 2; // 3 instruções

  i++; // 2 instruções
}

console.log(numeros); // [2, 4, 6, 8, 10]
```

O código acima dobra o valor de cada item do vetor, para esse algoritmo temos a seguinte função:

> f(n) = 4 + 6n

Onde 4 instruções (as duas primeiras atribuições, o acesso à propriedade `length` e a primeira condição do loop) são processadas antes da entrada na repetição e outras 6 (o corpo do laço) serão processadas ***n*** vezes de acordo com o tamanho do vetor de números.

No entanto, os números constantes dentro da função são irrelevantes para a análise, o que nos interessa é a taxa de **crescimento** do algoritmo em seu **pior caso** (ou no limite), conhecido também como **comportamento assintótico**, ou seja, o termo crescimento ***n*** que tende ao infinito.

Portanto, podemos simplificar a função anterior:

> f(n) = n

Em um outro exemplo podemos considerar que:

> f(n) = n² + 3n = n²

Ficamos somente com a termo quadrático (n²) porque é a **maior taxa de crescimento** do algoritmo. Para representar esse comportamento do algoritmo em seu pior caso, utilizamos uma notação especial chamada **Big-O**.

## Notação Big-O

A notação Big-O é a representação matemática da complexidade de um algoritmo em seu **pior caso**. Os valores mais comuns são:

- Complexidade constante O(1);
- Complexidade linear O(n);
- Complexidade logarítmica O(log(n));
- Complexidade quadrática O(n²)

## Complexidade de Espaço

Além do tempo, podemos medir a complexidade dos algoritmos com base no espaço. A notação Big-O aqui refere-se à quantidade de memória que um algoritmo aloca para resolver determinado problema.

Um algoritmo com a complexidade constante **O(1)**, aloca sempre uma mesma quantidade de memória independente do tamanho da entrada de dados. Já a complexidade de espaço **O(n)**, por exemplo, cresce linearmente em função do tamanho da entrada.

Exemplo de complexidade constante O(1):

```javascript
const numeros = [1, 2, 3, 4, 5];

let i = 0; // 1 alocação
let n = numeros.length; // 1 alocação

let sum = 0; // 1 alocação

while(i < n) {
  sum += numeros[i];

  i++;
}

console.log(sum); // 15
```

Exemplo de complexidade linear O(n):

```javascript
const numeros = [1, 2, 3, 4, 5];

let i = 0; // 1 alocação
let n = numeros.length; // 1 alocação

let aux = []; // 1 alocação

while(i < n) {
  aux[i] = numeros[i]; // n alocações

  i++;
}

console.log(aux); // [1, 2, 3, 4, 5]
```

## Eficiência

Para projetar algoritmos eficientes, devemos sempre pensar nesses aspectos de tempo e espaço apresentados, sendo ideal que o nosso código tenha o menor número de instruções e alocações possíveis.

Entretanto, na vida real tudo vai depender do tamanho do problema que temos em mãos e qual o ambiente que nosso código irá ser executado para ter ideia de quais aspectos vamos priorizar mais.

## Referências

- Video-aula: [CS50 Week 3, Algorithms](https://cs50.harvard.edu/x/2021/weeks/3/)
- Livro: Estrutura de Dados e Algoritmos com JavaScript - Loiane Groner



Caio Ferrarezi

Posts

Entendendo a reatividade do Vue com proxies

Como adicionar o v-model em um componente Vue

Complexidade de algoritmos