Vue利用廣度優(yōu)先搜索實現(xiàn)watch
更新時間：2023年08月04日 10:04:36 作者：前端胖頭魚
這篇文章主要為大家學習介紹了Vue如何利用廣度優(yōu)先搜索實現(xiàn)watch（有意思），文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下
前言
通過前面幾篇文章，我們對Vue3中的響應式設計有了初步的了解。
- 面試官：Vue3響應式系統(tǒng)都不會寫，還敢說精通？
- 面試官：你覺得Vue的響應式系統(tǒng)僅僅是一個Proxy？
- Vue3：原來你是這樣的“異步更新”
- 為啥面試官總喜歡問computed是咋實現(xiàn)的?
這一篇我們試著實現(xiàn)一個watch
1. 兩種watch的基本用法
1.1 通過函數(shù)回調監(jiān)聽數(shù)據
最基本的用法是給watch指定一個回調函數(shù)并返回你想要監(jiān)聽的響應式數(shù)據。
const?state1?=?reactive({
??name:?'前端胖頭魚',
??age:?100
})
watch(()?=>?state1.age,?()?=>?{
??console.log('state1的age發(fā)生變化了',?state1.age)
})
state1.age?=?200
setTimeout(()?=>?{
??state1.age?=?300
},?500)
1.2 直接監(jiān)聽一個對象
還可以直接監(jiān)聽一個響應式對象來觀測它的變化。
const?state1?=?reactive({
??name:?'前端胖頭魚',
??age:?100,
??children:?{
????name:?'胖小魚',
????age:?10
??}
})
watch(state1,?()?=>?{
??console.log('state1發(fā)生變化了',?state1)
})
state1.age?=?200
setTimeout(()?=>?{
??state1.children.age?=?100
},?500)
2. 實現(xiàn)watch最核心的點
其實watch的底層實現(xiàn)非常簡單，和computed一樣都需要借助任務調度。
簡單來說就是感知數(shù)據的變化，數(shù)據發(fā)生了變化就執(zhí)行對應的回調，那么怎么感知呢？
const?state?=?reactive({
??name:?'前端胖頭魚'
})
useEffect(()?=>?{
??//?原本state發(fā)生變化之后，應該執(zhí)行這里
??console.log(state.name)
},?{
??//?但是指定scheduler之后，會執(zhí)行這里
??scheduler?()?{
????console.log('state變化了')
??}
})
state.name?=?'胖小魚'聰明的你肯定也猜到了，scheduler不就是天然感知數(shù)據的變化的工具嗎？
沒錯，watch的實現(xiàn)少不了它，來吧，搞起?。?！
3. 支持兩種使用方式
3.1 支持回調函數(shù)形式
const?watch?=?(source,?cb)?=>?{
??effect(source,?{
????scheduler?()?{
??????cb()
????},
??})
}
//?測試一波
const?state?=?reactive({
??name:?'前端胖頭魚',
})
watch(()?=>?state.name,?()?=>?{
??console.log('state.name發(fā)生了變化',?state.name)
})
state.name?=?'胖小魚'
3.2 支持直接傳遞響應式對象
不錯哦！第一種方式已經初步實現(xiàn)了，接下來搞第二種。
第二種直接傳入響應式對象的方式和第一種傳入回調函數(shù)并指向響應式數(shù)據的區(qū)別是什么？
在于我們需要手動遍歷這個響應式對象使得它的任意屬性發(fā)生變化我們都能感知到。
3.3 廣度優(yōu)先搜索遍歷深層嵌套的屬性
此時就到了這篇文章裝逼(額~~)的點了。如果想訪問一個深層嵌套對象的所有屬性，最常見的做法就是遞歸。
如果你想在面試的過程中秀一波，我覺得使用廣度優(yōu)先搜索是個不錯的主意（狗頭臉），代碼也非常簡單，就不詳細解釋了。
如果您對廣度優(yōu)先搜索和深度優(yōu)先搜索感興趣歡迎在評論區(qū)留言，我會單獨寫一篇文章來講它。
?const?bfs?=?(obj,?callback)?=>?{
??const?queue?=?[?obj?]
??while?(queue.length)?{
????const?top?=?queue.shift()
????if?(top?&&?typeof?top?===?'object')?{
??????for?(let?key?in?top)?{
????????//?讀取操作出發(fā)getter，完成依賴搜集
????????queue.push(top[?key?])
??????}
????}?else?{
??????callback?&&?callback(top)
????}
??}
}
const?obj?=?{
??name:?'前端胖頭魚',
??age:?100,
??obj2:?{
????name:?'胖小魚',
????age:?10,
????obj3:?{
??????name:?'胖小小魚',
??????age:?1,
????}
??},
}
bfs(obj,?(value)?=>?{
??console.log(value)
})
我們已經能夠讀取深層嵌套對象的任意屬性了，接下來繼續(xù)完善watch方法
const?watch?=?(source,?cb)?=>?{
??let?getter
??//?處理傳回調的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????//?封裝成讀取source對象的函數(shù)，觸發(fā)任意一個屬性的getter，進而搜集依賴
????getter?=?()?=>?bfs(source)
??}
??const?effectFn?=?effect(getter,?{
????scheduler()?{
??????cb()
????}
??})
}
//?測試一波
const?state?=?reactive({
??name:?"前端胖頭魚",
??age:?100,
??obj2:?{
????name:?"胖小魚",
????age:?10,
??},
})
watch(state,?()?=>?{
??console.log("state發(fā)生變化了");
});
看來還是有不少坑啊！雖然我們實現(xiàn)了n層嵌套對象屬性的讀取（理論上所有的屬性改變都應該觸發(fā)回調），但是state.obj2.name = 'yyyy'卻沒有被感知到，為什么呢？
3.4 淺響應與深響應
回顧一下reactive函數(shù)，你會發(fā)現(xiàn)，當value本身也是一個對象的時候，我們并不會使value也變成一個響應式數(shù)據。
所以哪怕我們通過bfs方法遍歷了該對象的所有屬性，也僅僅是第一層的key具有了響應式效果而已。
//?統(tǒng)一對外暴露響應式函數(shù)
function?reactive(state)?{
??return?new?Proxy(state,?{
????get(target,?key)?{
??????const?value?=?target[key]
??????//?搜集key的依賴
??????//?如果value本身是一個對象，對象下的屬性將不具有響應式
??????track(target,?key)?
??????return?value;
????},
????set(target,?key,?newValue)?{
??????//?console.log(`set?${key}:?${newValue}`)
??????//?設置屬性值
??????target[key]?=?newValue
??????trigger(target,?key)
????},
??})
}解決辦法也很簡單，是對象的情況下再給他reactive一次就好了。
//?統(tǒng)一對外暴露響應式函數(shù)
function?reactive(state)?{
??return?new?Proxy(state,?{
????get(target,?key)?{
??????const?value?=?target[key]
??????//?搜集key的依賴
??????//?如果value本身是一個對象，對象下的屬性將不具有響應式
??????track(target,?key)?
??????//?如果是對象，再使其也變成一個響應式數(shù)據
??????if?(typeof?value?===?"object"?&&?value?!==?null)?{
????????return?reactive(value);
??????}
??????return?value;
????},
????set(target,?key,?newValue)?{
??????//?console.log(`set?${key}:?${newValue}`)
??????//?設置屬性值
??????target[key]?=?newValue
??????trigger(target,?key)
????},
??})
}最后再回到前面的例子，你會發(fā)現(xiàn)我們成功了!!!
4. watch的新值和舊值
到目前為止，我們實現(xiàn)了watch最基本的功能，感知其數(shù)據的變化并執(zhí)行對應的回調。
接下來我們再實現(xiàn)一個基礎功能：在回調函數(shù)中獲取新值與舊值。
watch(state,?(newVal,?oldVal)?=>?{
??//?xxx
})新值和舊值主要在于獲取時機不一樣，獲取方式確實一模一樣的，執(zhí)行effectFn即可
const?watch?=?(source,?cb)?=>?{
??let?getter
??let?oldValue
??let?newValue
??//?處理傳回調的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????getter?=?()?=>?bfs(source)
??}
??const?effectFn?=?effect(getter,?{
????lazy:?true,
????scheduler()?{
??????//?變化后獲取新值
??????newValue?=?effectFn()
??????cb(newValue,?oldValue)
??????//?執(zhí)行回調后將新值設置為舊值
??????oldValue?=?newValue
????}
??})
??//?第一次執(zhí)行獲取值
??oldValue?=?effectFn()
}測試一波
const?state?=?reactive({
??name:?"前端胖頭魚",
??age:?100,
??obj2:?{
????name:?"胖小魚",
????age:?10,
??},
})
watch(()?=>?state.name,?(newValue,?oldValue)?=>?{
??console.log("state.name",?{?newValue,?oldValue?})
})
state.name?=?'111'
5. 支持立即調用時機
最后再實現(xiàn)立即調用時機immediate，watch就大功告成啦！
const?watch?=?(source,?cb,?options?=?{})?=>?{
??let?getter
??let?oldValue
??let?newValue
??//?處理傳回調的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????getter?=?()?=>?bfs(source)
??}
??const?job?=?()?=>?{
????//?變化后獲取新值
????newValue?=?effectFn()
????cb(newValue,?oldValue)
????//?執(zhí)行回調后將新值設置為舊值
????oldValue?=?newValue
??}
??const?effectFn?=?effect(getter,?{
????lazy:?true,
????scheduler()?{
??????job()
????}
??})
??//?如果指定了立即執(zhí)行，便執(zhí)行第一次
??if?(options.immediate)?{
????job()
??}?else?{
????oldValue?=?effectFn()
??}
}
watch(()?=>?state.name,?(newValue,?oldValue)?=>?{
??console.log("state.name",?{?newValue,?oldValue?});
},?{?immediate:?true?});
通過判斷immediate是否為true來決定是否一開始就執(zhí)行cb回調，且第一次回調的舊值oldValue應該為undefined。
以上就是Vue利用廣度優(yōu)先搜索實現(xiàn)watch的詳細內容，更多關于Vue watch的資料請關注腳本之家其它相關文章！
相關文章
基于vue+openlayer實現(xiàn)地圖聚合和撒點效果
Openlayers 是一個模塊化、高性能并且功能豐富的WebGIS客戶端的JavaScript包，用于顯示地圖及空間數(shù)據，并與之進行交互，具有靈活的擴展機制，本文給大家介紹vue+openlayer實現(xiàn)地圖聚合效果和撒點效果，感興趣的朋友一起看看吧2021-09-09
這篇文章主要介紹了vue3.0父傳給子的值不隨父組件改變而改變問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家分享的是 Vue中props用法介紹，? 在Vue中通過props,可以將原本孤立的組件串聯(lián)起來，也就是可以子組件可以接收父組件傳遞過來的data，下面我們一起進入文章看看內容的詳細介紹吧,需要的朋友也可以參考一下2021-11-11
這篇文章主要介紹了vue下axios攔截器token刷新機制的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會給你圍繞主題展開詳細的內容介紹，感興趣的小伙伴可以參考一下2022-07-07
這篇文章主要為大家詳細介紹了用Vue封裝導航欄組件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue init webpack myproject構建項目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構建項目 ip不能訪問的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 使用axios 數(shù)據請求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據請求第三方插件的使用 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue computed的緩存實現(xiàn)原理，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法代碼詳解
el-table是element-ui提供的表格組件,可以用于展示和操作數(shù)據,這篇文章主要給大家介紹了關于Vue+Element-UI中el-table動態(tài)合并單元格:span-method方法的相關資料,需要的朋友可以參考下2023-09-09