前端从零开始写一个简单的响应式

天天向上的鹿茸

已于 2023-04-29 20:06:38 修改

阅读量486

点赞数 1

文章标签：前端学习 vue.js

于 2023-04-04 15:32:56 首次发布

本文链接：https://blog.csdn.net/weixin_45696837/article/details/129954080

版权

文章介绍了如何实现一个简单的响应式系统，通过遍历对象设置setter和getter，结合Dep类来收集依赖，Watcher类用于数据更新时的回调。当数据变化时，通过Dep通知Watcher执行异步更新。文章提供了完整的示例代码，并提到了GitHub上的前端手写题和一个Vue音乐项目的资源。

摘要由CSDN通过智能技术生成

写一个简单的响应式。
不是vue的源码更多的是一个理解。
首先需要遍历对象，为对象的每个属性设置setter和getter。

function observer(obj) {
    const vm = {};
    for (const prop in obj) {
        if (Object.hasOwnProperty.call(obj, prop)) {
            const dep = new Dep();
            Object.defineProperty(vm, prop, {
                get() {
                    dep.depend();
                    return data[prop];
                },
                set(val) {
                    data[prop] = val;
                    dep.notify();
                }
            })
        }
    }
    return vm;
}

收集依赖通过Dep实例进行收集，并且收集的是Watcher实例。
Dep

class Dep {
    deps = [];
    notify() {
        const deps = this.deps;
        this.deps = [];
        for (let i = 0; i < deps.length; i++) {
            const watcher = deps[i];
            schedule.push(watcher);
        }
        schedule.nextTick();
    }
    depend() {
        watcher && this.deps.push(watcher);
    }
}

Watcher

class Watcher {
    constructor(data, prop, cb) {
        this.data = data;
        this.prop = prop;
        this.cb = cb;
        this.value = this.get();
    }
    get() {
        watcher = this;
        let value = this.data[this.prop];
        watcher = undefined;
        return value;
    }
    update() {
        const oldValue = this.value;
        this.value = this.get();
        this.cb(this.value, oldValue);
    }
}

watcher实例的执行是异步任务，并且微任务的优先级更高。需要调度器Schedule

class Schedule {
  _task = new Set();

    push(watcher) {
        this._task.add(watcher);
    }

    _run() {
        const task = this._task;
        this._task = new Set();
        for (const watcher of task) {
            watcher.update();
        }
    }

    nextTick() {
        Promise.resolve().then(this._run.bind(this));
    }
}

完整案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="first">1</div>

    <script>
        let watcher = null;

        class Schedule {
            _task = new Set();

            push(watcher) {
                this._task.add(watcher);
            }

            _run() {
                const task = this._task;
                this._task = new Set();
                for (const watcher of task) {
                    watcher.update();
                }
            }

            nextTick() {
                Promise.resolve().then(this._run.bind(this));
            }

        }
        const schedule = new Schedule();
        class Dep {
            deps = [];
            notify() {
                const deps = this.deps;
                this.deps = [];
                for (let i = 0; i < deps.length; i++) {
                    const watcher = deps[i];
                    schedule.push(watcher);
                }
                schedule.nextTick();
            }
            depend() {
                watcher && this.deps.push(watcher);
            }
        }

        class Watcher {
            constructor(data, prop, cb) {
                this.data = data;
                this.prop = prop;
                this.cb = cb;
                this.value = this.get();
            }
            get() {
                watcher = this;
                let value = this.data[this.prop];
                watcher = undefined;
                return value;
            }
            update() {
                const oldValue = this.value;
                this.value = this.get();
                this.cb(this.value, oldValue);
            }
        }




        const data = { count: 1 };

        function observer(obj) {
            const vm = {};
            for (const prop in obj) {
                if (Object.hasOwnProperty.call(obj, prop)) {
                    const dep = new Dep();
                    Object.defineProperty(vm, prop, {
                        get() {
                            dep.depend();
                            return data[prop];
                        },
                        set(val) {
                            data[prop] = val;
                            dep.notify();
                        }
                    })
                }
            }
            return vm;
        }
        const observerData = observer(data);
        const firstDOM = document.getElementById("first");
        const oWatcher = new Watcher(observerData, "count", function (val, oldVal) {
            console.log(val, oldVal);
            firstDOM.innerHTML = val;
        })
        firstDOM.onclick = function () {
            observerData.count++;
            observerData.count++;
            observerData.count++;
        }

    </script>

</body>

</html>