假的简单vue

简单的写了下，啥都没优化

function Vue(options = {
    data: {},
    methods: {},
    mounted: function () { }
}) {
    var _this = this;
    this.$el = document.getElementById(options.el)
    this.data = options.data || {};

    // 附加methods
    function initMethods() {
        for (const key in options.methods) {
            if (options.methods.hasOwnProperty(key)) {
                _this[key] = options.methods[key].bind(_this);
            }
        }
    }
    // 初始化data数据
    function initData() {
        for (let dataItem in _this.data) {
            if (_this.data.hasOwnProperty(dataItem)) {
                 //将data中的属性挂到实例上，代理设置和读取值
                Object.defineProperty(_this, dataItem, {
                    get: function () {
                        return _this.data[dataItem];
                    },
                    set: function (val) {
                        console.log(dataItem, val)
                        return _this.data[dataItem] = val;
                    },
                    enumerable: true,
                    configurable: true
                });
            }
        }
    }
    initMethods();
    initData();
    // 执行mounted方法
    options.mounted.apply(_this)
    return this;
}


var v = new Vue({
    el: "app",
    data: {
        a: 1,
        b: 2
    },
    methods: {
        add() {
            this.a++;
        },
        sub() {
            this.b--;
        }
    },
    mounted() {
        this.a = 1;
        setInterval(() => {
            this.add();
            this.sub()
        }, 500);
    }
});