vue3.0 Proxy实现数据响应式

   let state = {
        msg: 'hello world !',
        msg2: 'hello world2 !'
    }


    let action
        //  行为收集(行为=控制+显示)
    let watcher = (fn) => {
        action = fn //记录,便于执行fn时存储
        fn()
        action = null //清空,避免执行行为时,再次收集
    }

    // 设置响应化
    let reactiveFn = (state) => {
        let obj = {}
        return new Proxy(state, {
            get(target, key) {
                if (action) {
                    !obj[key] && (obj[key] = [])
                    obj[key].push(action)
                }
                return target[key]
            },
            set(target, key, value) {
                target[key] = value
                obj[key].forEach(action => action())
                return true
            }
        })
    }

    state = reactiveFn(state)

    watcher(() => {
        app.innerHTML = state.msg
    })
    watcher(() => {
        app2.innerHTML = state.msg2
    })