Vue2的响应式原理剖析

最新推荐文章于 2026-07-15 01:00:00 发布

原创最新推荐文章于 2026-07-15 01:00:00 发布 · 140 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客探讨了HTML中的数据劫持和响应式设计。通过一个简单的例子展示了如何使用JavaScript实现数据订阅器模型（Dep）以及数据劫持，实现了V-model类似的功能。文章详细解释了数据获取和设置过程中如何触发和响应数据变化，从而实现数据联动和双向绑定。

html部门

<!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="app">
        订阅视图 
        <span class="one"></span>
    </div>
<script src="./index.js"></script>
<script>
    let obj = {}
    data({
        data: obj,
        tag: 'user',
        datakey: 'one',
        selector: '.one'
    })
    // 初始化数据
    obj.one = '1111';
    // 劫持数据 N次

    // 响应式
    // 数据联动 双向绑定
    // 需要捕获到修改
</script>
</body>
</html>

js部分

// 订阅器模型
let Dep = {
    clientList: {}, // 容器
    // 添加订阅
    listen: function(key, fn) {
        // if(!this.clientList[key]) {
        //     this.clientList[key] = []
        // }else {
        //     this.clientList[key].push(fn)
        // }
        (this.clientList[key] || (this.clientList[key] = [])).push(fn);
    },
    // 发布
    trigger: function() {
        // 将类数组变成数组
        let  key = Array.prototype.shift.call(arguments),
             fns = this.clientList[key];
        // 没有这个消息
        if(!fns || fns.length === 0) {
            return false;
        }
        // 有这个消息
        for (let i = 0, fn; fn = fns[i++];) {
            fn.apply(this, arguments)
        }
    }
}
// 数据劫持
let data = function({data, tag, datakey, selector}) {
    let value = '';
    el = document.querySelector(selector);
    // V-model得原理
    Object.defineProperty(data , datakey, {
        get: function() {
            console.log('取值')
            return value;
        },
        set: function(newval) {
            console.log('设置值');
            value = newval;
            // 发布
            Dep.trigger(tag, newval);
        }
    })
    // 先订阅
    Dep.listen(tag, function(text) {
        el.innerHTML = text
    })
}

标签