目錄副作用函數(shù)響應(yīng)式數(shù)據(jù)副作用函數(shù)

指的是會(huì)產(chǎn)生副作用的函數(shù)；

JavaScriptlet 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)注好吧啦網(wǎng)其它相關(guān)文章！