Vue3中是如何實現(xiàn)數(shù)據(jù)響應(yīng)式示例詳解
副作用函數(shù)
指的是會產(chǎn)生副作用的函數(shù)；
JavaScript
let val = 1;//全局變量
function effect() {
val = 2; //修改全局變量，產(chǎn)生副作用
}當effect函數(shù)執(zhí)行時，對全局變量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會設(shè)置body的innerText屬性，其值為obj.text,第6行代碼又修改了text的值，期望副作用函數(shù)重新執(zhí)行，如果能實現(xiàn)這個目標，那么對于obj就是響應(yīng)式數(shù)據(jù)。
如何才能讓obj變成響應(yīng)式數(shù)據(jù)呢？通過觀察我們發(fā)現(xiàn)了兩點線索：
?當副作用函數(shù)effect執(zhí)行時，會觸發(fā)字段obj.text的讀取操作；
?當修改obj.text的值時，會觸發(fā)字段obj.text的設(shè)置操作；
如果能夠攔截obj對象的讀取和設(shè)置操作，事情就迎刃而解了。當讀取字段obj.text時，我們可以把副作用函數(shù)存儲到一個“桶”中。
當設(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];
? },
? //攔截設(shè)置操作
? set(traget, key, newValue) {
??? //設(shè)置屬性值
??? traget[key] = newValue;
??? //把副作用函數(shù)從桶中取出來并執(zhí)行
??? bucket.forEach((fn) => fn());
??? //返回true代表設(shè)置操作成功
??? return true;
? },
});測試用例：
function effect() {
? document.body.innerHTML = obj.text;
}
effect();
setTimeout(() => {
? obj.text = "hello vue3";
}, 1000);目前的實現(xiàn)數(shù)據(jù)響應(yīng)式還存在很多缺陷，比如副作用函數(shù)的名字是寫死的，后續(xù)再完善響應(yīng)式系統(tǒng)。
以上就是Vue3中是如何實現(xiàn)數(shù)據(jù)響應(yīng)式的詳細內(nèi)容，更多關(guān)于Vue3數(shù)據(jù)響應(yīng)式的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細介紹了vue項目中引入外部的js文件的10種方法,文中的示例代碼講解詳細,具有一定的借鑒價值,需要的小伙伴可以參考下2023-08-08
vue中使用better-scroll實現(xiàn)滑動效果及注意事項
這篇文章主要介紹了vue中使用better-scroll實現(xiàn)滑動效果，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
在?Vue.js?開發(fā)中,合理地控制元素的樣式對于構(gòu)建高質(zhì)量的用戶界面至關(guān)重要,Vue?提供了靈活的方式來綁定樣式,這篇文章將探索?Vue?中設(shè)置樣式的七種做法,并結(jié)合代碼,逐步說明每種方法的實現(xiàn),需要的朋友可以參考下2024-03-03
在現(xiàn)代Web開發(fā)中,與后端API的交互是不可避免的,然而,網(wǎng)絡(luò)請求是不穩(wěn)定的,可能會因為各種原因失敗,因此,優(yōu)雅地處理API請求失敗的情況是提升用戶體驗和應(yīng)用穩(wěn)定性的關(guān)鍵,本文將詳細介紹在Vue.js中處理API請求失敗的最佳實踐和策略,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了vue3下eslint配置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本文主要介紹了Vue實現(xiàn)DOM元素拖放互換位置示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
本篇文章主要介紹了vue通過watch對input做字數(shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了Vue axios 跨域請求無法帶上cookie的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了如何解決vue項目打包后文件過大問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了使用vue3搭建后臺系統(tǒng)的過程記錄,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08