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ù)呢？通過(guò)觀察我們發(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來(lái)實(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ù)從桶中取出來(lái)并執(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)文章
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中引入外部的js文件的10種方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的小伙伴可以參考下2023-08-08
vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果及注意事項(xiàng)
這篇文章主要介紹了vue中使用better-scroll實(shí)現(xiàn)滑動(dòng)效果，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
深入探索Vue中樣式綁定的七種實(shí)現(xiàn)方法
在?Vue.js?開發(fā)中,合理地控制元素的樣式對(duì)于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來(lái)綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說(shuō)明每種方法的實(shí)現(xiàn),需要的朋友可以參考下2024-03-03
Vue.js處理API請(qǐng)求失敗的最佳實(shí)踐和策略
在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請(qǐng)求是不穩(wěn)定的,可能會(huì)因?yàn)楦鞣N原因失敗,因此,優(yōu)雅地處理API請(qǐng)求失敗的情況是提升用戶體驗(yàn)和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細(xì)介紹在Vue.js中處理API請(qǐng)求失敗的最佳實(shí)踐和策略,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要介紹了Vue實(shí)現(xiàn)DOM元素拖放互換位置示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過(guò)watch對(duì)input做字?jǐn)?shù)限定的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決
這篇文章主要介紹了Vue axios 跨域請(qǐng)求無(wú)法帶上cookie的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
如何解決vue項(xiàng)目打包后文件過(guò)大問題
這篇文章主要介紹了如何解決vue項(xiàng)目打包后文件過(guò)大問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vue3搭建后臺(tái)系統(tǒng)的詳細(xì)步驟
這篇文章主要介紹了使用vue3搭建后臺(tái)系統(tǒng)的過(guò)程記錄,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08