Vue3中 ref VS reactive，淺談它們間有何不同？

這篇文章帶大家了解一下Vue.js 3 中 ref 和 reactive，介紹一下ref和reactive的差別，希望對大家有幫助！

關鍵點

#reactive() 只接受對象作為參數， 不支援JS 原始類型（String， Boolean，Number，BigInt，Symbol，null，undefined）。 【相關推薦：vue.js教學】

ref() 會在後台呼叫reactive()

##因

reactive() 支援對象，而ref() 內部呼叫reactive()，故兩個方法都支援物件

但是，

ref() 有一個.value 屬性可以用來重新賦值，而reactive() 不可重新賦值（會遺失回應性）

#使用場景

ref()<strong></strong>

當數值類型是JS 原始類型時使用(例如

'string', true, 23)

當賦值對象，且後續需要被重新賦值時(例如一個陣列-

更多請見這裡)

reactive()<strong></strong>

當數值型別是對象，且不需要重新賦值式使用，

ref() 內部也是呼叫reactive()，無需徒增開銷

總結

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);

更多程式相關知識，請造訪：

程式設計影片！ ！

以上是Vue3中 ref VS reactive，淺談它們間有何不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！