Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解
副作用函數(shù)
指的是會(huì)產(chǎn)生副作用的函數(shù)；
JavaScript
let val = 1;//全局變量
function effect() {
val = 2; //修改全局變量，產(chǎn)生副作用
}當(dāng)effect函數(shù)執(zhí)行時(shí)，對(duì)全局變量val產(chǎn)生了副作用，改變了其值。
響應(yīng)式數(shù)據(jù)
const obj = {text:"hello world"};
function effect(){
//effect函數(shù)的執(zhí)行讀取obj.text
document.body.innerHTML = obj.text;
}
obj.text = "hello Vue.js";上面的副作用函數(shù)effect會(huì)設(shè)置body的innerText屬性，其值為obj.text,第6行代碼又修改了text的值，期望副作用函數(shù)重新執(zhí)行，如果能實(shí)現(xiàn)這個(gè)目標(biāo)，那么對(duì)于obj就是響應(yīng)式數(shù)據(jù)。
如何才能讓obj變成響應(yīng)式數(shù)據(jù)呢？通過觀察我們發(fā)現(xiàn)了兩點(diǎn)線索：
?當(dāng)副作用函數(shù)effect執(zhí)行時(shí)，會(huì)觸發(fā)字段obj.text的讀取操作；
?當(dāng)修改obj.text的值時(shí)，會(huì)觸發(fā)字段obj.text的設(shè)置操作；
如果能夠攔截obj對(duì)象的讀取和設(shè)置操作，事情就迎刃而解了。當(dāng)讀取字段obj.text時(shí)，我們可以把副作用函數(shù)存儲(chǔ)到一個(gè)“桶”中。
當(dāng)設(shè)置obj.text時(shí)，再把副作用函數(shù)effect從“桶”里取出并執(zhí)行。
按照上面的思路，使用Proxy來實(shí)現(xiàn)：
//創(chuàng)建一個(gè)副作用函數(shù)的桶
const bucket = new Set();
//原始數(shù)據(jù)
const data = { text: "hello world" };
//對(duì)原始數(shù)據(jù)的代理
const obj = new Proxy(data, {
? //攔截讀取操作
? get(traget, key) {
??? //將副作用函數(shù)effect添加到副作用函數(shù)的桶中
??? bucket.add(effect);
??? //返回屬性值
??? return traget[key];
? },
? //攔截設(shè)置操作
? set(traget, key, newValue) {
??? //設(shè)置屬性值
??? traget[key] = newValue;
??? //把副作用函數(shù)從桶中取出來并執(zhí)行
??? bucket.forEach((fn) => fn());
??? //返回true代表設(shè)置操作成功
??? return true;
? },
});測(cè)試用例：
function effect() {
? document.body.innerHTML = obj.text;
}
effect();
setTimeout(() => {
? obj.text = "hello vue3";
}, 1000);目前的實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式還存在很多缺陷，比如副作用函數(shù)的名字是寫死的，后續(xù)再完善響應(yīng)式系統(tǒng)。
以上就是Vue3中是如何實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的詳細(xì)內(nèi)容，更多關(guān)于Vue3數(shù)據(jù)響應(yīng)式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
在Vue 3中,Provide和Inject是一對(duì)用于組件間數(shù)據(jù)傳遞的API,通常用于父組件向其子組件傳遞數(shù)據(jù),但并不通過props的方式,本文將深入探討Provide和Inject的工作原理,并通過示例代碼幫助你理解如何在你的Vue應(yīng)用中使用它們,需要的朋友可以參考下2025-02-02
Element Plus 菜單組件區(qū)別和用法最佳實(shí)踐
本文介紹了ElementPlus中的菜單組件,包括el-menu、el-menu-item、el-sub-menu和el-menu-item-group的特性、用法以及最佳實(shí)踐,通過對(duì)比不同場(chǎng)景的使用指南,幫助開發(fā)者根據(jù)需求選擇合適的組件組合,構(gòu)建功能強(qiáng)大且用戶友好的菜單系統(tǒng),感興趣的朋友跟隨小編一起看看吧2026-01-01
本文是腳本之家小編給大家收藏整理的關(guān)于vue項(xiàng)目中遇到的一點(diǎn)小問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
Dialog通常是指在Vue.js 3.x版本中使用的對(duì)話框組件,它是一個(gè)輕量級(jí)、易集成的彈窗插件,用于創(chuàng)建通知、確認(rèn)消息、輸入表單等交互場(chǎng)景,最近項(xiàng)目中遇到了全局掛載Dialog的需求,所以本文給大家介紹了Vue3全局掛載Dialog組件的方法,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue使用axios添加請(qǐng)求頭方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動(dòng)端使用vue-qrcode-reader實(shí)現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3前端實(shí)現(xiàn)微信支付詳細(xì)步驟
這篇文章主要給大家介紹了vue3前端實(shí)現(xiàn)微信支付的詳細(xì)步驟,隨著移動(dòng)端的普及和互聯(lián)網(wǎng)購(gòu)買需求的增加,微信支付在電商領(lǐng)域中發(fā)揮著越來越重要的作用,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-11-11
為什么vue等的這些mvvm框架比傳統(tǒng)的操作dom渲染頁(yè)面要快,下面這篇文章主要給大家介紹了關(guān)于虛擬DOM與diff算法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
Vue中commit和dispatch區(qū)別及用法辨析(最新)
在Vue中,commit和dispatch是兩個(gè)用于觸發(fā)Vuex store中的mutations和actions的方法,這篇文章主要介紹了Vue中commit和dispatch區(qū)別及其用法辨析,需要的朋友可以參考下2024-06-06
簡(jiǎn)單聊一聊axios配置請(qǐng)求頭content-type
最近在工作中碰到一個(gè)問題,后端提供的get請(qǐng)求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04