MVVM（双向绑定架构）底层原理函数

HTML代码：
div id=“root”> </div

<script>
        /*    说明： 
                VUE是基于MVVM实现数据双向绑定，通过defineProperty代理data对象所有属性，
                实现属性get/set监听，当数据发生改变触发set及watch，通知节点重绘
    
        */

        //    M
        var data = {
            title: '我会变身'
        }
        // VM
        var _title = data.title;
        Object.defineProperty(data, 'title', {
            // get为获取data数据时执行的函数，切记要将数据return出来！
            get() {
                return _title;
            },
            // set为data数据发生改变时执行的函数
            set(newValue) {
                _title = newValue;  //传参newValue即为函数add里设置的data.name的值
                watch(); //通知观察者执行函数
            }
        })
        // 数据变化监听，通知视图重新渲染
        function watch() {
            render();
        }
        // v
        function render() {
            document.getElementById('root').innerHTML = `
            <h1>${data.title}</h1>
            <button οnclick='add()'>点我变身</button>
        `
        };
        render();
        var flag = true;
        add = function () {
            if (flag) {
                data.title = '我变啦';
                flag = !flag;
            } else {
                data.title = '我会变身';
                flag = !flag;
            }
        }
    </script>