Terdapat beberapa persamaan antara
ref
和 reactive
kerana kedua-duanya menyediakan cara untuk menyimpan data dan membenarkan data itu dibalas.
Tetapi:
Perbezaan Tahap Tinggi:
const wrappedBoolean = reactive({ value: true })
Sumber: perbincangan forum Vue
Reaksi
reactive
獲取對象并向原始對象返回一個響應(yīng)式代理
.
Contoh
import {ref, reactive} from "vue"; export default { name: "component", setup() { const title = ref("my cool title") const page = reactive({ contents: "meh?", number: 1, ads: [{ source: "google" }], filteredAds: computed(() => { return ads.filter(ad => ad.source === "google") }) }) return { page, title } } }
Arahan
Dalam perkara di atas, bila-bila masa kita mahu menukar atau mengakses harta page
,
Contohnya page.ads
,page.filteredAds
akan dikemas kini melalui proksi.
reactive()
Hanya menerima objek, bukan JS primitif (String, Boolean, Number, BigInt, Symbol, null, undefined)
ref()
正在幕后調(diào)用 reactive()
dipanggil di belakang tabir reactive()
適用于對象,并且 ref()
調(diào)用 reactive()
Memandangkan ref()
有一個用于重新分配的 .value
屬性,reactive()
, objek digunakan untuk kedua-duanya
.value
untuk penugasan semula,
ref()
'string'
、true
、23
Maklumat lanjut di sinireactive()
)
ref()
Bila..
ref()
似乎是可行的方法,因為它支持所有對象類型并允許使用 .value
重新分配。 ref()
是一個很好的起點,但是當您習慣了該 API 后,就會知道 reactive()
ref()
.value
. ialah titik permulaan yang baik, tetapi apabila anda membiasakan diri dengan API, anda akan mengetahui bahawa ref()
,但 ref()
mempunyai lebih sedikit overhed, dan anda mungkin mendapati ia lebih sesuai dengan keperluan anda.
reactive()
Kes guna
reactive()
, tetapi
setup() { const blogPosts = ref([]); return { blogPosts }; } getBlogPosts() { this.blogPosts.value = await fetchBlogPosts(); }Di atas
memerlukan penugasan semula harta dan bukannya keseluruhan objek.
setup() { const blog = reactive({ posts: [] }); return { blog }; } getBlogPosts() { this.blog.posts = await fetchBlogPosts(); }Kes guna
Kes penggunaan yang baik untuk reactive() ialah set primitif yang dimiliki bersama:
const person = reactive({ name: 'Albert', age: 30, isNinja: true, });Kod di atas terasa lebih logik berbanding kod di atas
const name = ref('Albert'); const age = ref(30); const isNinja = ref(true);
ref()
Pautan berguna
Jika anda masih sesat, panduan mudah ini membantu saya: https://www.danvega.dev/blog/2020/02/12/vue3-ref-vs-reactive/reactive()
和 ref()
Gunakan argumen sahaja: