Vue 3 中的 ref 與 React ？

Question

查看一些人的 Vue 3 預覽教學的一些範例。 [目前處於測試階段]

我找到了兩個例子：

反應式

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

<script>
import { reactive, computed } 從 '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>

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

#