// shallowReactive(淺的監(jiān)視，淺的劫持，淺的響應(yīng)式數(shù)據(jù))與reactive（深的）// 定義一個(gè)reactiveHandler處理對(duì)象 let reactiveHandler = {// 獲取屬性值get(target, prop) {// 這里的result返回1const result = Reflect.get(target, prop)console.log('攔截到get', prop, result)return result},// 修改屬性值或是添加屬性set(target, prop, value) {// 這里的result返回trueconst result = Reflect.set(target, prop, value)console.log('攔截到set', prop, value, result)return result},// 刪除某個(gè)屬性deleteProperty(target, prop) {// 這里的result返回trueconst result = Reflect.deleteProperty(target, prop)console.log('攔截到deleteProperty', prop, result)return result} }// 定義一個(gè)shallowReactive函數(shù)，傳入一個(gè)目標(biāo)對(duì)象 function shallowReactive(target) {// 兩種情況，如果是單值，就直接反回，如果數(shù)據(jù)類(lèi)型是object，就給屬性添加proxyif (target && typeof target === "object") {return new Proxy(target, reactiveHandler)} else {return target} }// 定義一個(gè)reactive函數(shù)，傳入一個(gè)目標(biāo)對(duì)象 function reactive(target) {// 判斷當(dāng)前的目標(biāo)對(duì)象是不是object類(lèi)型（數(shù)組/對(duì)象）if (target && typeof target === "object") {// 先判斷當(dāng)前的數(shù)據(jù)是不是數(shù)組if (Array.isArray(target)) {// 數(shù)組的數(shù)據(jù)要進(jìn)行遍歷target.forEach((item, i) => {target[i] = reactive(item)})} else {// 如果是對(duì)象Object.keys(target).forEach(key => {target[key] = reactive(target[key])})}} else {// 如果傳入的數(shù)據(jù)類(lèi)型是基本數(shù)據(jù)類(lèi)型，那么就直接返回return target} } 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的js实现shallowReactive和reactive的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。