vue中的ref/reactive區(qū)別及原理解析
Vue中的ref和reactive是兩種不同的數(shù)據(jù)響應(yīng)式管理方式。
ref是Vue 3中新加入的特性，它可以將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象。通過(guò)ref創(chuàng)建的響應(yīng)式對(duì)象在訪問(wèn)和修改時(shí)會(huì)自動(dòng)觸發(fā)重新渲染。ref返回的是一個(gè)包含value屬性的對(duì)象，訪問(wèn)或修改數(shù)據(jù)時(shí)需要通過(guò)value屬性進(jìn)行操作。
import { ref } from 'vue';
const count = ref(0);
// 訪問(wèn)響應(yīng)式數(shù)據(jù)
console.log(count.value);
// 修改響應(yīng)式數(shù)據(jù)
count.value++;
// ref對(duì)象仍然是一個(gè)對(duì)象
console.log(count); // { value: 1 }reactive是Vue 2中的一個(gè)API，它可以將一個(gè)普通的JavaScript對(duì)象轉(zhuǎn)換為響應(yīng)式對(duì)象。通過(guò)reactive創(chuàng)建的響應(yīng)式對(duì)象被稱(chēng)為響應(yīng)式數(shù)據(jù)。訪問(wèn)和修改響應(yīng)式數(shù)據(jù)時(shí)，Vue會(huì)跟蹤數(shù)據(jù)的變化并觸發(fā)視圖的更新。
import { reactive } from 'vue';
const state = reactive({
count: 0
});
// 訪問(wèn)響應(yīng)式數(shù)據(jù)
console.log(state.count);
// 修改響應(yīng)式數(shù)據(jù)
state.count++;
// state對(duì)象仍然是一個(gè)對(duì)象
console.log(state); // { count: 1 }原理上，ref和reactive都是通過(guò)Proxy實(shí)現(xiàn)的。當(dāng)訪問(wèn)響應(yīng)式對(duì)象的屬性時(shí)，Vue會(huì)使用Proxy攔截訪問(wèn)操作，并將該屬性標(biāo)記為依賴(lài)，當(dāng)屬性被修改時(shí)，Vue會(huì)觸發(fā)相應(yīng)的更新操作。ref和reactive的區(qū)別在于ref是對(duì)對(duì)象的包裝，而reactive是對(duì)整個(gè)對(duì)象進(jìn)行響應(yīng)式化處理。
到此這篇關(guān)于vue中的ref/reactive區(qū)別及原理的文章就介紹到這了,更多相關(guān)vue ref/reactive區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue.js第四天的學(xué)習(xí)筆記，一個(gè)簡(jiǎn)單的組件示例,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項(xiàng)目報(bào)錯(cuò)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù)
一次性的加載全部的數(shù)據(jù),并且將其渲染到頁(yè)面上,就會(huì)導(dǎo)致頁(yè)面卡頓,往往采用分頁(yè)和無(wú)限滾動(dòng)的方式來(lái)展示,本文主要介紹了vue中el-table實(shí)現(xiàn)無(wú)限向下滾動(dòng)懶加載數(shù)據(jù),感興趣的可以了解一下2023-12-12
vue 中的動(dòng)態(tài)傳參和query傳參操作
這篇文章主要介紹了vue 中的動(dòng)態(tài)傳參和query傳參操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)
這篇文章主要介紹了Vue引用vee-validate插件表單驗(yàn)證問(wèn)題(cdn方式引用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
diff算法的本質(zhì)是找出兩個(gè)對(duì)象之間的差異,目的是盡可能復(fù)用節(jié)點(diǎn)。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue中npm如何設(shè)置倉(cāng)庫(kù)地址
在使用npm命令時(shí),如果直接從國(guó)外的倉(cāng)庫(kù)下載依賴(lài),下載速度很慢,甚至?xí)螺d不下來(lái),我們可以更換npm的倉(cāng)庫(kù)源,提高下載速度,這篇文章主要給大家介紹了關(guān)于vue中npm如何設(shè)置倉(cāng)庫(kù)地址的相關(guān)資料,需要的朋友可以參考下2023-12-12
vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)
這篇文章主要介紹了vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
使用vue-cli創(chuàng)建vue項(xiàng)目介紹
這篇文章介紹了使用vue-cli創(chuàng)建vue項(xiàng)目的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁(yè)報(bào)404錯(cuò)誤解決
這篇文章主要介紹了關(guān)于vue項(xiàng)目部署后刷新網(wǎng)頁(yè)報(bào)404錯(cuò)誤解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07