1.给输入框绑个变量


    id="input_1">


    let datavalue = "66666"
    const input_1 = do服务器托管网cument.getElementById("input_1")
    input_1.value = datavalue
    input_1.addEventListener('input', function(e) {
        datavalue = e.target.value
        console.log(datavalue)
    })

诶,似乎这样就完成了

但我们要让他更像vue

2.加上Dep,Watcher


"en">
head>
    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    Document
head>

    id="input_1">


    // 模拟 Vue 实例
    let data = {
        message: 'Hello'
    };
    const input_1 = document.getElementById("input_1")
    input_1.value = data.message
    input_1.addEventListener('input', function (e) {
        e.target.value = data.message
        console.log(datavalue)
    })

    function defineReactive(obj, key, value) {
        let dep = new Dep(); // 依赖容器

        Object.defineProperty(obj, key, {
            get: function () {
                if (Dep.target) {
                    dep.addDep(Dep.target);
                }
                return value;
            },
            set: function (newValue) {
                value = newValue;
                dep.notify();
            }
        });
    }

    // 依赖容器
    function Dep() {
        this.deps = [];

        this.addDep = function (dep) {
            this.deps.push(dep);
        };

        this.notify = function () {
            this.deps.forEach(dep => {
                dep.update();
            });
        };
    }

    Dep.target = null;

    // Watcher
    function Watcher(updateFunc) {
        this.update = updateFunc;
    }

    // 初始化响应式数据
    defineReactive(data, 'message', data.message);

    // 模拟 Watcher
    let watcher = new Watcher(function () {
        console.log('Mes服务器托管网sage updated:', data.message);
        input_1.value = data.message
    });

    // 模拟视图更新
    Dep.target = watcher;
    data.message; // 触发依赖收集
    setTimeout(() => {
        data.message = '6666'; //触发更新
    }, 1000)

3.效果图

4.代码解释

defineReactive函数用来定义一个响应式属性，其中通过Object.defineProperty给属性添加 getter 和 setter 方法。在 getter 方法中，会判断Dep.target是否存在，如果存在则将当前 Watcher 对象添加到依赖容器 Dep 中；在 setter 方法中，更新属性的值，并通过依赖容器 Dep 的notify方法通知所有依赖的 Watcher 进行更新。
Dep函数是一个简单的依赖容器，其中包含了一个 deps 数组用来存储依赖（Watcher），addDep方法用来添加依赖，notify方法用来通知所有依赖进行更新。
Watcher函数用来创建 Watcher 对象，其中包含一个update方法，用来在属性发生变化时执行相应的更新操作。
在初始化响应式数据时，调用defineReactive函数定义了一个名为message的响应式属性。
创建了一个 Watcher 对象watcher，并在其构造函数中定义了一个回调函数，用来在属性变化时输出消息并更新视图。
将watcher赋值给Dep.target，然后访问data.message，触发依赖收集，将watcher添加到依赖容器 Dep 中。

5.补充

一张响应式原理图

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

相关推荐: springboot参数汇总

multipart multipart.enabled 开启上传支持（默认：true） multipart.file-size-threshold: 大于该值的文件会被写到磁盘上 multipart.location 上传文件存放位置 multipart.ma…

第142篇:原生js实现响应式原理

1.给输入框绑个变量

2.加上Dep,Watcher

3.效果图

4.代码解释

5.补充

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用