這篇文章帶大家了解一下Vue.js 3 中 ref 和 reactive,介紹一下ref和reactive的差別,希望對大家有幫助!
關鍵點
#reactive()
只接受對象作為參數, 不支援JS 原始類型(String, Boolean,Number,BigInt,Symbol,null,undefined)。 【相關推薦:vue.js教學】
ref()
會在後台呼叫reactive()
reactive() 支援對象,而
ref() 內部呼叫
reactive(),故兩個方法都支援物件
ref() 有一個
.value 屬性可以用來重新賦值,而
reactive() 不可重新賦值(會遺失回應性)
#使用場景
ref()<strong></strong>
'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: 'Albert', age: 30, isNinja: true, });上面的程式碼比下面的程式碼更符合邏輯
const name = ref('Albert'); const age = ref(30); const isNinja = ref(true);更多程式相關知識,請造訪:
程式設計影片! !
以上是Vue3中 ref VS reactive,淺談它們間有何不同?的詳細內容。更多資訊請關注PHP中文網其他相關文章!