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)文章
解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題
這篇文章主要介紹了解決vue中axios設(shè)置超時(shí)(超過(guò)5分鐘)沒(méi)反應(yīng)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
過(guò)濾器提供給我們的一種數(shù)據(jù)處理方式。過(guò)濾器功能不是必須要使用的，因?yàn)樗鶎?shí)現(xiàn)的功能也能用計(jì)算屬性或者函數(shù)調(diào)用的方式來(lái)實(shí)現(xiàn)。這篇文章主要為大家介紹了Vue中過(guò)濾器的使用，需要的可以了解一下2023-03-03
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問(wèn)題，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
這篇文章主要介紹了Vue中的slot使用插槽分發(fā)內(nèi)容的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中集成Electron,包括安裝electron和electron-builder兩個(gè)依賴(lài),以及配置.npmrc文件和手動(dòng)修改鏡像源的方法,整個(gè)過(guò)程詳細(xì)記錄了從創(chuàng)建項(xiàng)目、安裝依賴(lài)、修改配置、到最終打包部署的每一步2024-10-10
這篇文章主要介紹了vue axios封裝以及API統(tǒng)一管理 ,需要的朋友可以參考下2019-04-04
Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue使用Echarts實(shí)現(xiàn)數(shù)據(jù)可視化的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)
這篇文章主要介紹了vue Element左側(cè)無(wú)限級(jí)菜單實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03