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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了鳳城免費(fèi)建站歡迎大家使用！

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

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

ref() 會(huì)在后臺(tái)調(diào)用 reactive()

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

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

使用場(chǎng)景

ref()

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

當(dāng)賦值對(duì)象，且后續(xù)需要被重新賦值時(shí) (例如一個(gè)數(shù)組 - 更多請(qǐng)見(jiàn)這里)

reactive()

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

總結(jié)

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

ref() 案例

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

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

上面采用 reactive() 的話，需要屬性賦值取代對(duì)象賦值。

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

reactive() 案例

reactive() 適合對(duì)一組歸屬相同的數(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)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！