首頁  >  文章  >  web前端  >  Vue3中 ref VS reactive,淺談它們間有何不同?

Vue3中 ref VS reactive,淺談它們間有何不同?

青灯夜游
青灯夜游轉載
2021-10-25 10:06:185370瀏覽

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

Vue3中 ref VS 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: &#39;Albert&#39;,
  age: 30,
  isNinja: true,
});

上面的程式碼比下面的程式碼更符合邏輯

const name = ref(&#39;Albert&#39;);
const age = ref(30);
const isNinja = ref(true);

更多程式相關知識,請造訪:

程式設計影片! !

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

陳述:
本文轉載於:learnku.com。如有侵權,請聯絡admin@php.cn刪除