Vue3中ref與reactive有什么區(qū)別

本篇內(nèi)容介紹了“Vue3中ref與reactive有什么區(qū)別”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

關(guān)鍵點(diǎn)

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

ref() 會在后臺調(diào)用 reactive()

因 reactive() 支持對象，而 ref() 內(nèi)部調(diào)用 reactive()，故兩個方法都支持對象

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

使用場景

ref()

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

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

reactive()

當(dāng)數(shù)值類型是對象，且不需要重新賦值時使用，ref() 內(nèi)部也是調(diào)用 reactive()，無需徒增開銷

總結(jié)

ref() 似乎是正確的選擇，因?yàn)樗С秩康膶ο箢愋?，而且可以通過 .value 重新賦值。 ref() 很好，但是當(dāng)你熟悉 API 之后，就知道 reactive() 開銷更小，可能發(fā)現(xiàn)這個更能滿足需求。

ref() 案例

通過使用 ref() 來初始化，但是 ref() 對需要重新賦值的對象比較友好，例如數(shù)組。

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() 適合對一組歸屬相同的數(shù)據(jù)初始化：

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

上面的代碼比下面的更符合邏輯

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

“Vue3中ref與reactive有什么區(qū)別”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！