第161题 手写Vue3基本响应式原理

    // 实现
    function reactive(obj) {/**todo**/}
    function effect(fn) {/**todo**/}
    
    // 使用
    const user = reactive({name: 'poetries'})
    effect(() => {console.log('name', user.name)})
    // 修改属性，自动触发effect内部函数执行
    user.name = '张三'
    setTimeout(()=>{ user.name = '李四'})
```**答案**  
```js
    // 简单实现
    
    var fns = new Set()
    var activeFn
    
    function reactive(obj) {
      return new Proxy(obj, {
        get(target, key, receiver) {
          const res = Reflect.get(target,key,receiver) // 相当于target[key]
    
          // 懒递归 取值才执行
          if(typeof res === 'object' && res != null) {
            return reactive(res)
          }
    
          if(activeFn) fns.add(activeFn)
    
          return res
        },
        set(target,key, value, receiver) {
          fns.forEach(fn => fn()) // 触发effect订阅的回调函数的执行
          return Reflect.set(target, key, value, receiver)
        }
      })
    }
    
    function effect(fn) {
      activeFn = fn
      fn() // 执行一次去取值，触发proxy get
    }

    // 测试
    
    var user = reactive({name: 'poetries',info:{age: 18}})
    effect(() => {console.log('name', user.name)})
    // 修改属性，自动触发effect内部函数执行
    user.name = '张三'
    // user.info.age = 10 // 修改深层次对象
    setTimeout(()=>{ user.name = '李四'})