réf vs réactif dans Vue 3?

Question

En regardant quelques exemples de tutoriels de prévisualisation de personnes pour Vue 3. [Actuellement en version bêta]

J'ai trouvé deux exemples :

Reactive

import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}

Ref

import { ref, computed, onMounted } from "vue";

export default {
  setup(props) {
    // State
    const money = ref(1);
    const delta = ref(1);

    // Refs
    const titleRef = ref(null);

    // Computed props
    const formattedMoney = computed(() => money.value.toFixed(2));

    // Hooks
    onMounted(() => {
      console.log("titleRef", titleRef.value);
    });

    // Methods
    const add = () => (money.value += Number(delta.value));

    return {
      delta,
      money,
      titleRef,
      formattedMoney,
      add
    };
  }
};

Answer 1

Référence : Il prend un argument primitif et renvoie un objet mutable réactif. L'objet a une seule propriété 'value' et il pointera vers l'argument pris par lui.

Réactif : Il prend un objet JavaScript comme argument et renvoie une copie réactive basée sur Proxy de l'objet.

Vous pouvez en apprendre davantage à partir de ce tutoriel vidéo : https://www.youtube.com/watch?v=JJM7yCHLMu4

Answer 2

ref objet prend une valeur interne et renvoie un objet réactif et mutable. généralement utilisé pour des variables simples de types primitifs comme String, Boolean, Number, etc.

reactive est un objet enveloppeur qui prend un objet et renvoie un proxy réactif de l'objet d'origine. généralement utilisé pour les types structurés en dictionnaire comme JS Object.

Vous pouvez en apprendre davantage sur ref vs reactive dans cet article : https://dev.to/hirajatamil/must-know-ref-vs-reactive-differences-in-vue-3-composition-api-3bp4