VUE2响应式原理和复现

最新推荐文章于 2024-09-26 08:23:03 发布

源去_云走

最新推荐文章于 2024-09-26 08:23:03 发布

阅读量1k Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_56427830/article/details/136590583

Vue 专栏收录该内容

4 篇文章 0 订阅

VUE2响应式原理和复现

流程图：

Object.defineProperty来拦截数据，将数据转换成getter/setter的形式，在访问数据时调用getter函数，在修改数据时调用setter函数。然后利用发布-订阅模式，在数据变动时触发依赖，也即发布更新给订阅者，订阅者收到消息后进行相应的处理。

test.html

<html>
    <body>
        <div id = 'app'>
            test-1: <span class="box-1"></span>
            <br />
            test-2: <span class="box-2"></span>
        </div>
        <script src="test.js"></script>
        <script>
            let obj = {}
            elListen({
                data: obj,
                tag: 'view-1',
                datakey: 'one',
                selector: '.box-1'
            })
            elListen({
                data: obj,
                tag: 'view-2',
                datakey: 'tow',
                selector: '.box-2'
            })
            // 初始化赋值 一次
            obj.one = '这是视图-1'
            obj.tow = '这是视图-2'

            // 劫持数据，更新
            obj.one = '修改视图-1'
            obj.tow = '修改视图-2'
        </script>
    </body>
</html>

test.js

// 订阅器模型
 let Dep = {
    clientList: {}, // 容器
    // 添加订阅 订阅事件
    listen: function(key, fn) {
        // 如果clientList[key] 存在则直接绑定fn；
        // 如果clientList[key]不存在 则先赋值为[]，再绑定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)
        }
    }
}
// data: 数据，tag: 订阅关键字，datakey: 劫持数据关键字，selector: DOM元素
let elListen = function({data, tag, datakey, selector}) {
    let value = '',
        el = document.querySelector(selector);
    Object.defineProperty(data, datakey, {
        // 取值
        get: function() {
            console.log('取值' + datakey)
            return value;
        },
        set: function(val) {
            console.log('设置值' + datakey)
            value = val;
            // 发布
            Dep.trigger(tag, val)
        }
    })
    // 订阅 在发布前必须先订阅
    Dep.listen(tag, function(text) {
        console.log('订阅'+text)
        el.innerHTML = text
    })
}