// shallowReactive(淺的監視，淺的劫持，淺的響應式數據)與reactive（深的）// 定義一個reactiveHandler處理對象 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},// 刪除某個屬性deleteProperty(target, prop) {// 這里的result返回trueconst result = Reflect.deleteProperty(target, prop)console.log('攔截到deleteProperty', prop, result)return result} }// 定義一個shallowReactive函數，傳入一個目標對象 function shallowReactive(target) {// 兩種情況，如果是單值，就直接反回，如果數據類型是object，就給屬性添加proxyif (target && typeof target === "object") {return new Proxy(target, reactiveHandler)} else {return target} }// 定義一個reactive函數，傳入一個目標對象 function reactive(target) {// 判斷當前的目標對象是不是object類型（數組/對象）if (target && typeof target === "object") {// 先判斷當前的數據是不是數組if (Array.isArray(target)) {// 數組的數據要進行遍歷target.forEach((item, i) => {target[i] = reactive(item)})} else {// 如果是對象Object.keys(target).forEach(key => {target[key] = reactive(target[key])})}} else {// 如果傳入的數據類型是基本數據類型，那么就直接返回return target} } 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的js实现shallowReactive和reactive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。