Реф против реактивного в Vue 3? - PullRequest
Новая
       34

Реф против реактивного в Vue 3?

1 голос
/ 27 апреля 2020

Рассматривая некоторые примеры учебных пособий для некоторых людей для Vue 3. [Сейчас бета-версия]

Я нашел два примера:

Reactive 

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
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
    }
  }
}
</script>

Ссылка 

<template>
  <div>
    <h2 ref="titleRef">{{ formattedMoney }}</h2>
    <input v-model="delta" type="number">
    <button @click="add">Add</button>
  </div>
</template>

<script>
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
    };
  }
};
</script>

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Ниже вы можете увидеть наш пример с использованием Reactive References в верхней части, а под другим альтернативным реактивным синтаксисом. 

//reactivity with ref syntax

import { ref, computed } from vue

export default {
  setup() {
    const capacity = ref(4)
    const members = ref(["Tim", "John", "Andr"])
    const simpleComputed = computed(() => {
      return capacity.value - members.value.length
    })

    return { capacity, members, simpleComputed }
  }
}


//reactivity with reactive syntax

import { reactive, computed } from vue

export default {
  setup() {
    const event = reactive({
      capacity: 4,
      members: ["Tim", "John", "Andr"]
      simpleComputed: computed(() => {
        return event.capacity - event.capacity.length
      }
    })
    return { event }
  }
}

Как видно из кода выше в нижней части, я создал новое событие константа, которая принимает простой JavaScript объект и возвращает реактивный объект. Это может показаться знакомым при использовании опции данных в нашем обычном компонентном синтаксисе, где я также отправляю объект. Однако, как вы можете видеть выше, я также могу отправить наши вычисленные свойства в этот объект. Вы также должны заметить, что когда я использую этот синтаксис, нам больше не нужно писать .value при доступе к свойствам. Это потому, что я просто обращаюсь к свойствам объекта объекта события. Вы также должны заметить, что мы возвращаем все событие

Оба синтаксиса действительны для использования, и ни один из них не считается наилучшей практикой

0 голосов
/ 27 апреля 2020

Есть некоторые сходства между ref и reactive в том, что они оба предоставляют метод хранения данных и позволяют этим данным быть реактивными.

Однако:

Различия по высокому уровню:

Вы не можете использовать реактив () для примитивов (строк, чисел, логических значений) - это то, для чего вам нужны ссылки, потому что у вас будут ситуации, когда вам нужно чтобы иметь «реактивное логическое значение», например…

, конечно, вы можете создать объект, который оборачивает примитивное значение и сделать его реактивным (): 

const wrappedBoolean = reactive({
  value: true
})

и просто так, вы заново изобрели реф.

Источник: Vue обсуждение на форуме

Reactive

reactive берет объект и возвращает реактивный proxy к исходному объекту.

Пример 

import {ref, reactive} from "vue";

export default {
  name: "component",
  setup() {
    const title = ref("my cool title")
    const page = reactive({
      contents: "meh?",
      number: 1,
      ads: [{ source: "google" }],
      filteredAds: computed(() => {
        return ads.filter(ad => ad.source === "google")
      })
    })

    return {
       page, 
       title
    }
  }
}

Объяснение

Выше, всякий раз, когда мы хотим изменить или получить доступ к свойствам page,
скажем page.ads, page.filteredAds будет обновляться через прокси.

...