2 - Reactivity fundamentals Flashcards
(14 cards)
Em Composition API, qual o modo recomendado para declarar estado reativo?
Em Composition API, o modo recomendado é utilizando a função ref().
A função ref() recebe um argumento e o retorna encapsulado dentro de um objeto ref com uma propriedade .value.
Quais tipos de dados podem ser usados com ref()?
Ref pode ser usado com valores de qualquer tipo, incluindo objetos aninhados, arrays, ou estruturas JS como Maps
Como ativar reatividade em elementos internos de objetos usando ref()?
Por padrão, ao utilizar objetos com ref, eles já são profundamente reativos “deeply reactive”
Como “desativar” reatividade profunda em objetos com ref()?
Vue disponibiliza a função “shallowRef()”, que torna reativo apenas as propriedades acessadas com .value. Essa função pode ser usada para otimizar performance ao evitar o trackeamento de objetos muito grandes.
Por que precisamos usar .value para acessar propriedades em um ref()?
Como em JS não há como detectar acesso ou mutação de valores primitivos. Quando usamos ref() o Vue retorna um objeto com o valor passado pro método em uma propriedade chamada value. Isso permite ao Vue implementar seu sistema de reatividade
Para que serve o método nextTick?
O método nextTick() no Vue serve para executar um código JavaScript somente depois que o DOM foi atualizado em resposta a uma mudança de estado reativo.
Quando você altera um estado reativo, o Vue não atualiza o DOM imediatamente. Ele aguarda o próximo “tick” do ciclo de atualização para aplicar todas as mudanças de forma eficiente. Isso significa que se você tentar acessar o DOM logo após mudar um estado, pode acabar pegando o valor antigo.
Para que é usado o método reactive() do Vue?
Reactive é o segundo método disponível em Vue para declarar estados reativos. Essa função funciona apenas para objetos e retorna uma Proxy. Desse modo não há necessidade de usar .value() para recuperar os dados.
Quais são as limitações do Reactive?
- Não funciona com valores primitivos;
- Não permite reatribuição do objeto por completo sem que se perca a reatividade;
- Não permite a utilização de destructuring sem que se perca a reatividade
Para que é usado o método computed()?
Computed() é utilizado para realizar computação sobre propriedades reativas sem modificar os dados originais. É um método útil de realizar computação sobre dados de modo a remover lógica complexa no template.
Qual o valor retornado por uma computada e como ele pode ser acessado?
O valor retornado é uma computed ref(). Similar ao ref() ela pode ser acessada com .value
Qual a diferença entre usar uma propriedade computada e um método?
Propriedades computadas são mais performáticas que métodos, já que usam cache de suas dependências, de modo que só são recalculadas quando algumas das dependências muda. Já métodos são executados quando qualquer re-renderização ocorre.
Como é possível acessar o valor anteriormente retornado por uma computada?
A partir da versão 3.4 do Vue é posível receber um argumento na computada que guarda o valor anterior, como em computed((prev) => {})
O que acontece se você tentar atribuir um valor diretamente a uma propriedade computada?
Você receberá um aviso de tempo de execução (runtime warning), já que, por padrão, propriedades computadas são somente leitura
Como pode-se atribuir valores a uma computada?
Não é comum nem recomendado realizar atribuição de valor em uma computada, mas, nos raros casos em que se deseje fazer isso, é possível ao prover um getter e um setter a uma computada, como em: const fullName = computed({ get() {…}, set(newVal) {…} })
