js实现shallowReactive和reactive

// 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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。