Vue 3 Composition API: A React and Refresher

Posted by

<!DOCTYPE html>

03 – Ref e Reactive | Vue 3 e Composition API

03 – Ref e Reactive | Vue 3 e Composition API

O Vue 3 é a última versão do popular framework JavaScript Vue.js, que traz diversas melhorias e novidades em relação às versões anteriores. Uma das novas funcionalidades do Vue 3 é a introdução de uma nova API de composição, que permite aos desenvolvedores escrever código mais coeso e reutilizável.

Dois dos recursos mais importantes desta nova API são os métodos Ref e Reactive. Estes métodos permitem aos desenvolvedores criar dados reativos de forma mais simples e eficiente.

Ref

O método Ref é utilizado para criar uma referência a um valor reativo. Em outras palavras, ele permite criar uma variável que pode ser facilmente monitorada por Vue e atualizada automaticamente quando o valor é alterado.

Para utilizar o método Ref, basta importá-lo do pacote Vue e utilizá-lo da seguinte maneira:

“`javascript
import { ref } from ‘vue’;

const count = ref(0);
“`

Reactive

O método Reactive, por sua vez, é utilizado para criar um objeto reativo. Ele funciona de maneira semelhante ao método Ref, mas ao invés de criar uma referência a um único valor, ele cria um objeto que pode conter múltiplos valores reativos.

Para utilizar o método Reactive, basta importá-lo do pacote Vue e utilizá-lo da seguinte maneira:

“`javascript
import { reactive } from ‘vue’;

const state = reactive({
count: 0,
text: ‘Hello, Vue 3!’
});
“`

Com a utilização destes métodos, é possível criar aplicações mais robustas e eficientes, que reagem de forma dinâmica às alterações nos dados. Esta é apenas uma pequena amostra das funcionalidades poderosas da nova API de composição do Vue 3.

0 0 votes
Article Rating
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
@whisperscribe
3 months ago

Só video de qualidade, parabéns mano! Não desista, sua didática é muito boa e a comunidade de Vue carece de instrutores

@nelsonroberto3238
3 months ago

Parabéns muito bom!