vue的响应式原理

index.js

let Dep = {
    clientList:{},
    listen:function(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)
        }
    }
}

let dataHijack = function({data,tag,datakey,selector}){
    let value = '',
        el = document.querySelector(selector);
    Object.defineProperty(data,datakey,{
        get(){
            return value
        },
        set(val){
            value = val
            Dep.trigger(tag,val)
        }
    })
    Dep.listen(tag,function(text){
        el.innerHTMl = text
    })
}

index.html

<div id="app">
    订阅视图-1: <span class="box-1"></span><br/>
    订阅视图-2：<span class="box-2"></span>
</div>
<script src="./index.js"></script>
<script>
    let dataView = {}
    dataHijack({
        data:dataView,
        tag:'view-1',
        datakey:'one',
        selector:'.box-1'
    })

    dataHijack({
        data:dataView,
        tag:'view-2',
        datakey:'two',
        selector:'.box-2'
    })

    dataView.one = 'one'
    dataView.two = 'two'
</script>

图片展示：