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

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

JavaScriptlet val = 1;//全局變量function effect() { val = 2; //修改全局變量，產(chǎn)生副作用}

當effect函數(shù)執(zhí)行時，對全局變量val產(chǎn)生了副作用，改變了其值。

響應式數(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會設置body的innerText屬性，其值為obj.text,第6行代碼又修改了text的值，期望副作用函數(shù)重新執(zhí)行，如果能實現(xiàn)這個目標，那么對于obj就是響應式數(shù)據(jù)。

如何才能讓obj變成響應式數(shù)據(jù)呢？通過觀察我們發(fā)現(xiàn)了兩點線索：

?當副作用函數(shù)effect執(zhí)行時，會觸發(fā)字段obj.text的讀取操作；

?當修改obj.text的值時，會觸發(fā)字段obj.text的設置操作；

如果能夠攔截obj對象的讀取和設置操作，事情就迎刃而解了。當讀取字段obj.text時，我們可以把副作用函數(shù)存儲到一個“桶”中。

當設置obj.text時，再把副作用函數(shù)effect從“桶”里取出并執(zhí)行。

按照上面的思路，使用Proxy來實現(xiàn)：

//創(chuàng)建一個副作用函數(shù)的桶 const bucket = new Set(); //原始數(shù)據(jù) const data = { text: 'hello world' }; //對原始數(shù)據(jù)的代理 const obj = new Proxy(data, { ? //攔截讀取操作 ? get(traget, key) { ??? //將副作用函數(shù)effect添加到副作用函數(shù)的桶中 ??? bucket.add(effect); ??? //返回屬性值 ??? return traget[key]; ? }, ? //攔截設置操作 ? set(traget, key, newValue) { ??? //設置屬性值 ??? traget[key] = newValue; ??? //把副作用函數(shù)從桶中取出來并執(zhí)行 ??? bucket.forEach((fn) => fn()); ??? //返回true代表設置操作成功 ??? return true; ? }, });

測試用例：

function effect() { ? document.body.innerHTML = obj.text; } effect(); setTimeout(() => { ? obj.text = 'hello vue3'; }, 1000);

目前的實現(xiàn)數(shù)據(jù)響應式還存在很多缺陷，比如副作用函數(shù)的名字是寫死的，后續(xù)再完善響應式系統(tǒng)。

以上就是Vue3中是如何實現(xiàn)數(shù)據(jù)響應式的詳細內(nèi)容，更多關于Vue3數(shù)據(jù)響應式的資料請關注好吧啦網(wǎng)其它相關文章！