vue3面试题 proxy使用

完成Component方法的代码书写，要求：

1. 修改数据时能够触发render方法执行；
2. 同步变更时需要合并，仅触发一次render方法；

const Component = () => {
    const _data = {
        name: ""
    };

    const render = () => {
        console.log(`render-name: ${_data}`);
    }

    // 写构造函数
    let data;

    return {
        data,
        render
    }
}

const com = Component();
// 要求以下代码需要触发render方法，并且同步变更需要合并
com.data.name = "张三";
com.data.name = "李四";
com.data.name = "王五";

setTimeout(() => {
    com.data.name = "xhy";
}, 0)

答案：

const Component = () => {
    const _data = {
        name: ""
    };

    let pending = false;

    const render = () => {
        console.log(`render-name: ${_data.name}`);
    }

    // 写构造函数
    let data = new Proxy(_data, {
        set: (target, key, value) => {
            try {
                // 赋值
                _data[key] = value;

                // 加入微任务队列
                if (!pending) {
                    pending = true;
                    Promise.resolve().then(() => {
                        render();
                        pending = false;
                    })
                }
                return true;
            } catch (error) {
                console.log(error);
                return false
            }
        }
    })

    return {
        data,
        render
    }
}

const com = Component();
// 要求以下代码需要触发render方法，并且同步变更需要合并
com.data.name = "张三";
com.data.name = "李四";
com.data.name = "王五";

setTimeout(() => {
    com.data.name = "xhy";
}, 0)