Ref vs. Reagieren in Vue 3?

Question

Schauen Sie sich einige Beispiele aus den Vue 3-Vorschau-Tutorials einiger Leute an. [Derzeit in der Beta]

Ich habe zwei Beispiele gefunden:

Reaktionsformel

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

<script>
{reaktiv, berechnet} aus 'vue' importieren

Standard exportieren {
  aufstellen() {
    const state = reaktiv({
      Anzahl: 0,
      double: berechnet(() => state.count * 2)
    })

    Funktion inkrementieren() {
      state.count++
    }

    zurückkehren {
      Zustand,
      Zuwachs
    }
  }
}
</script>

Referenz

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

<script>
import { ref, berechnet, onMounted } aus „vue“;

Standard exportieren {
  setup(props) {
    //Zustand
    const geld = ref(1);
    const delta = ref(1);

    // Refs
    const titleRef = ref(null);

    // Berechnete Requisiten
    const formattedMoney = berechnet(() => money.value.toFixed(2));

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

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

    zurückkehren {
      Delta,
      Geld,
      titleRef,
      formatiertesGeld,
      hinzufügen
    };
  }
};
</script>

Answer 1

ref 和 reactive 之间有一些相似之处，因为它们都提供了一种存储数据并允许数据响应的方法。

但是：

高水平差异：

const wrappedBoolean = reactive({
  value: true
})

来源：Vue 论坛讨论

反应式

reactive 获取对象并向原始对象返回一个响应式代理。

示例

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 将通过代理更新。

Answer 2

要点

• reactive() 只接受对象，不 JS 基元（String、Boolean、Number、BigInt、Symbol、null、undefined）
• ref() 正在幕后调用 reactive()
• 由于 reactive() 适用于对象，并且 ref() 调用 reactive()，因此对象适用于两者
• 但是，ref() 有一个用于重新分配的 .value 属性，reactive() 没有这个属性，因此无法重新分配

使用

ref() 当..

• 它是一个基元（例如'string'、true、23等）
• 这是一个您需要稍后重新分配的对象（如数组 - 更多信息在这里）

reactive() 当..

• 这是一个不需要重新分配的对象，并且您希望避免 ref() 的开销

总结

ref() 似乎是可行的方法，因为它支持所有对象类型并允许使用 .value 重新分配。 ref() 是一个很好的起点，但是当您习惯了该 API 后，就会知道 reactive() 的开销更少，并且您可能会发现它更能满足您的需求需求。

ref() 用例

对于基元，您将始终使用 ref()，但 ref() 对于需要重新分配的对象（例如数组）很有用。

setup() {
    const blogPosts = ref([]);
    return { blogPosts };
}
getBlogPosts() {
    this.blogPosts.value = await fetchBlogPosts();
}

上面的 reactive() 需要重新分配一个属性而不是整个对象。

setup() {
    const blog = reactive({ posts: [] });
    return { blog };
}
getBlogPosts() {
    this.blog.posts = await fetchBlogPosts();
}

reactive() 用例

reactive() 的一个很好的用例是一组属于在一起的原语：

const person = reactive({
  name: 'Albert',
  age: 30,
  isNinja: true,
});

上面的代码感觉比上面的代码更符合逻辑

const name = ref('Albert');
const age = ref(30);
const isNinja = ref(true);

有用的链接

如果您仍然迷失方向，这个简单的指南对我有帮助：https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/

仅使用 ref() 的论点：https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c

reactive() 和 ref() 存在背后的决策以及其他重要信息，Vue Composition API RFC：https://vuejs.org/guide/extras/composition-api-faq。 html#why-composition-api