vue3中的ref與reactive使用方法對(duì)比
Vue3 與之前的版本相比有很多改進(jìn),其中最重要的改進(jìn)之一是對(duì)響應(yīng)式數(shù)據(jù)的處理方式。Vue3 提供了兩個(gè)新的 API:ref
和 reactive
,它們可以幫助我們更好地管理和處理響應(yīng)式數(shù)據(jù)。在這篇文章中,我們將詳細(xì)介紹 Vue3 中的 ref
和 reactive
的區(qū)別和使用方法。
一、ref
ref
是 Vue3 中的一個(gè)函數(shù),它可以將一個(gè)普通的變量轉(zhuǎn)化為一個(gè)響應(yīng)式變量。使用 ref
的時(shí)候,我們需要傳入一個(gè)初始值,ref
會(huì)返回一個(gè)包含了這個(gè)初始值的對(duì)象。
使用 ref
的語法如下所示:
import { ref } from 'vue'; const count = ref(0);
在上面的代碼中,我們創(chuàng)建了一個(gè)名為 count
的變量,它的初始值為 0。通過調(diào)用 ref
函數(shù),我們將 count
變量轉(zhuǎn)化為了一個(gè) ref
對(duì)象。在組件中使用 count
的時(shí)候,我們需要通過 .value
來訪問它的值,且ref.value =
可以修改它的值。但是當(dāng) ref
在模板中作為頂層屬性被訪問時(shí),它們會(huì)被自動(dòng)“解包”,所以不需要使用 .value
。:
<template> <div>{{ count }}</div> </template> ------------------ <script setup> import { ref } from 'vue'; const count = ref(0); console.log(count)//RefImpl {...} console.log(count.value)//0 //使用.value改變count count.value = 3; console.log(count.value)//3 </script>
注意:在標(biāo)簽中使用無需加.value
,在函數(shù)中使用必須要加.value
除此之外,ref
還可以用來監(jiān)聽 DOM 元素的變化:
<template> <div ref="myDiv">這是一個(gè) DOM 元素</div> </template> <script> import { ref, onMounted } from 'vue'; export default { setup() { const myDiv = ref(null); onMounted(() => { console.log(myDiv.value.innerHTML); }); return { myDiv, }; }, }; </script>
在上面的代碼中,我們創(chuàng)建了一個(gè)名為 myDiv
的 ref
對(duì)象,并將它賦值給了一個(gè) div
元素。在組件的 setup
函數(shù)中,我們使用了 onMounted
鉤子函數(shù),在組件渲染完成之后,打印出了 myDiv
元素的 innerHTML
。
二、reactive
reactive
是 Vue3 中的另一個(gè) API,它可以將一個(gè)普通的對(duì)象轉(zhuǎn)化為一個(gè)響應(yīng)式對(duì)象。與 ref
不同的是,reactive
返回的是一個(gè)響應(yīng)式的對(duì)象,而不是一個(gè)包含值的對(duì)象。我們可以通過訪問響應(yīng)式對(duì)象的屬性來獲取或修改它的值。
使用 reactive 的語法如下所示:
import { reactive } from 'vue'; const state = reactive({ count: 0, });
在上面的代碼中,我們創(chuàng)建了一個(gè)名為 state
的響應(yīng)式對(duì)象,它包含了一個(gè)名為 count
的屬性,初始值為 0。
在組件中使用 state
的時(shí)候,我們可以像訪問普通對(duì)象的屬性一樣訪問它的屬性:
<template> <div>{{ state.count }}</div> </template>
除了訪問屬性之外,reactive
也可以對(duì)普通 JavaScript 對(duì)象或數(shù)組進(jìn)行響應(yīng)式處理,可以通過 reactive
將一個(gè)普通對(duì)象轉(zhuǎn)化為響應(yīng)式對(duì)象,從而實(shí)現(xiàn)對(duì)整個(gè)對(duì)象的響應(yīng)式追蹤,例如:
const obj = { a: 1, b: 2 }; const reactiveObj = reactive(obj); // 響應(yīng)式追蹤 reactiveObj.a = 3; console.log(obj.a); // 輸出 3
reactive 還可以在嵌套對(duì)象和數(shù)組中創(chuàng)建響應(yīng)式對(duì)象,例如:
const obj = { a: 1, b: { c: 2 }, d: [1, 2, 3] }; const reactiveObj = reactive(obj); // 響應(yīng)式追蹤 reactiveObj.b.c = 3; reactiveObj.d.push(4);
reactive 還支持在嵌套對(duì)象中使用 toRefs 將響應(yīng)式對(duì)象的屬性轉(zhuǎn)換為響應(yīng)式引用,方便在模板中使用。例如:
const obj = reactive({ a: 1, b: { c: 2 } }); const { b } = toRefs(obj); // 模板中使用 <template> <div>{{ b.c }}</div> </template>
總之,reactive
除了訪問屬性之外還能處理整個(gè)對(duì)象或數(shù)組的響應(yīng)式追蹤,以及支持在嵌套對(duì)象中使用 toRefs
方便在模板中使用。
三、ref和reactive的使用對(duì)比
1.ref的使用方法
ref
創(chuàng)建的變量可以通過.value
來獲取和修改其值。例如:
import { ref } from 'vue' // 創(chuàng)建ref const count = ref(0) // 獲取ref的值 console.log(count.value) // 輸出 0 // 修改ref的值 count.value = 1 console.log(count.value) // 輸出 1
2. reactive的使用方法
reactive
創(chuàng)建的對(duì)象需要通過解構(gòu)賦值的方式獲取和修改其屬性值。例如:
import { reactive } from 'vue' // 創(chuàng)建reactive對(duì)象 const obj = reactive({ count: 0 }) // 獲取reactive對(duì)象的屬性值 console.log(obj.count) // 輸出 0 // 修改reactive對(duì)象的屬性值 obj.count = 1 console.log(obj.count) // 輸出 1
四、總結(jié)
在Vue 3中,ref
和reactive
都是響應(yīng)式的API,但是它們的用途不同。ref
用于創(chuàng)建簡(jiǎn)單的值類型變量,而reactive
則用于創(chuàng)建復(fù)雜的對(duì)象。ref
創(chuàng)建的變量需要使用.value
來獲取和修改其值,而reactive
創(chuàng)建的對(duì)象需要使用解構(gòu)賦值來獲取和修改其屬性值。當(dāng)我們?cè)陂_發(fā)Vue 3應(yīng)用時(shí),需要根據(jù)具體的場(chǎng)景選擇使用ref
或者reactive
。在創(chuàng)建簡(jiǎn)單的值類型變量時(shí),使用ref
可以更方便地獲取和修改其值。而當(dāng)我們需要?jiǎng)?chuàng)建復(fù)雜的對(duì)象時(shí),使用reactive
可以更方便地進(jìn)行響應(yīng)式更新。同時(shí),Vue 3也提供了toRef
和toRefs
這兩個(gè)API,用于將reactive
對(duì)象的屬性轉(zhuǎn)換為ref
對(duì)象,方便獲取和修改其值。
到此這篇關(guān)于vue3中的ref與reactive的文章就介紹到這了,更多相關(guān)vue3中的ref與reactive內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)左右點(diǎn)擊滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
這篇文章主要給大家介紹了關(guān)于Vue.js使用Vuex與axios發(fā)送請(qǐng)求的相關(guān)資料,文中介紹的非常詳細(xì),相信對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04vue?watch中如何獲取this.$refs.xxx節(jié)點(diǎn)
這篇文章主要介紹了vue?watch中獲取this.$refs.xxx節(jié)點(diǎn)的方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼
這篇文章主要介紹了vue+element的表格實(shí)現(xiàn)批量刪除功能示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時(shí)間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下2021-08-08vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10vue-router history模式下的微信分享小結(jié)
本篇文章主要介紹了vue-router history模式下的微信分享小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中,編寫組件的方式是使用Options API,它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫對(duì)應(yīng)的功能模塊,這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10