原生代码实现vue响应式原理

<div id="app">
    <input type="text" id="aT">
    <h1 id="a"></h1>
    <br><br><br>
    <input type="text" id="bT">
    <h1 id="b"></h1>
</div>


<script>
    // 第一种定义对象
    var obj = {};
    var a = 'aaa';
    // 给obj定义属性b,并赋值为变量a的值
    obj.b = a;

    // 初始化
    document.getElementById("a").innerText = obj.b;
    document.getElementById('aT').value = obj.b;

    // 页面绑定
    document.getElementById("aT").oninput = function (e) {
        //将数据绑定给obj
        obj.b = e.target.value;
        // 将obj的值渲染在DOM上
        document.getElementById('a').innerText = obj.b;
    }






    // 第二种定义对象
    var vm = {}
    var msg = 'aaa'
    // 给vm定义属性foo,数据劫持
    Object.defineProperty(vm, 'foo', {
        // 赋值为变量msg的值
        get() {
            console.log('foo获取了msg的值');
            return msg;
        },
        // 变更属性foo的值为传入的newVal值
        set(newVal) {
            foo = newVal;
            console.log('foo变更了值');
            watcher('foo', foo)
        }
    })

    // 初始化
    document.getElementById("b").innerText = vm.foo;
    document.getElementById('bT').value = vm.foo;

    // 页面绑定
    document.getElementById("bT").addEventListener('input', function (e) {
        vm.foo = e.target.value
    })

    //监听器：更新DOM
    function watcher(key, value) {
        switch (key) {
            case 'foo':
                document.getElementById('b').innerText = value;
                break;
            default:
        }
    }


</script>