Vue3中ref與reactive有什么區別

本篇內容介紹了“Vue3中ref與reactive有什么區別”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

關鍵點

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

ref() 會在后臺調用 reactive()

因 reactive() 支持對象，而 ref() 內部調用 reactive()，故兩個方法都支持對象

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

使用場景

ref()

當數值類型是 JS 原始類型時使用 (例如 'string', true, 23)

當賦值對象，且后續需要被重新賦值時 (例如一個數組 - 更多請見這里)

reactive()

當數值類型是對象，且不需要重新賦值時使用，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與reactive有什么區別”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！