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

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

關(guān)鍵點

reactive() 只接受對象作為參數(shù)， 不支持 JS 原始類型 （String， Boolean，Number，BigInt，Symbol，null，undefined）?！鞠嚓P(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() 似乎是正確的選擇，因為它支持全部的對象類型，而且可以通過 .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)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

新聞名稱：Vue3中ref與reactive有什么區(qū)別
當(dāng)前鏈接：http://aaarwkj.com/article32/jjgipc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、微信公眾號、微信小程序、電子商務(wù)、網(wǎng)站改版、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)