js 模拟实现v-if_v-show-

效果图

js文件代码

class Vue {
   
    constructor(options) {
   
        let {
    el, data, methods } = options;
        this.el = document.querySelector(el)
        this._data = data;
        this.methods = methods;
        this.showPools = new Map() // show/if 仓库
        this.eventPools = new Map() // 事件仓库
        this.init()
    }
    init() {
   
        this.initData()
        this.initDom(this.el)
        this.initView(this.showPools)
        this.initEvent(this.eventPools)
    }
    // 数据劫持
    initData() {
   
        let _this = this;
        for (let key in _this._data) {
   
            Object.defineProperty(_this, key, {
   
                get() {
   
                    return _this._data[key]
                },
                set(newValue) {
   
                    _this._data[key] = newValue
                    _this.changeDom(key, this.showPools)
                }
            })
        }
    }
    // 初始dom处理
    initDom(el) {
   
        const _childN