Vue丐版数据双向绑定

迷南。 2023-07-13 04:13 78阅读 0赞

**HTML**

**创建VM实例**

window.onload = function() { 
        var app = new VueModel({ 
          el:'#app',
          data: { 
            number: 0,
          }
        })
      }

**初始化函数**

function VueModel(options) { 
        this._init(options);
      }

**初始化函数实现**

VueModel.prototype._init = function (options) { 
        this.$options = options;
        //判断传入的el类型
        this.$el = options.el.nodeType === 1 ? options.el : document.querySelector(options.el);
        this.$data = options.data;
        this.$methods = options.methods;
    
        this.vmbind = { };
        this._obverse(this.$data);
        this._complie(this.$el);
      }

**实现数据监听**

//数据监听器
      VueModel.prototype._obverse = function (obj) { 
        //获取数据对象data
        var _this = this;
        //遍历数据对象中的元素
        Object.keys(obj).forEach(function (key) { 
          if (obj.hasOwnProperty(key)) { 
            _this.vmbind[key] = {  _direc: []};
            var value = obj[key];
            //递归遍历类型是对象的一级属性
            if (value instanceof Object) { 
              _this._obverse(value);
            }
            var vmbind = _this.vmbind[key];
            //数据监听
            Object.defineProperty(_this.$data, key, { 
              enumerable: true,
              configurable: true,
              get: function () { 
                return value;
              },
              set: function (newVal) { 
                //触发数据更新
                if (value !== newVal) { 
                  value = newVal;
                  vmbind._direc.forEach(function (item) { 
                    item.update();
                  })
                }
              }
            })
          }
        })
      }

**绑定view和model**

//绑定view与model
      VueModel.prototype._complie = function (root) { 
        //取出元素节点
        var _this = this;
        //取出所有一级子节点
        var nodes = root.children;
    
        for (var i = 0; i < nodes.length; i++) { 
          var node = nodes[i];
          //递归子节点
          if (node.children.length) { 
            this._complie(node);
          }
    
          if (node.hasAttribute('v-model') && (node.tagName = 'INPUT' || node.tagName == 'TEXTAREA')) { 
            node.addEventListener('input', (function(key) { 
              var attrVal = node.getAttribute('v-model');
              //增加订阅者
              _this.vmbind[attrVal]._direc.push(new Watcher(
                'input',
                node,
                _this,
                attrVal,
                'value'
              ))
    
              return function() { 
                //数据更新
                _this.$data[attrVal] =  nodes[key].value;
              }
            })(i));
          } 
        }
      }

**消息订阅**

function Watcher(name, el, vm, exp, attr) { 
        this.name = name;         
        this.el = el;             
        this.vm = vm;             
        this.exp = exp;           
        this.attr = attr;         
    
        this.update();
      }
    
      Watcher.prototype.update = function () { 
        //将视图中的数据更新到model中
        this.el[this.attr] = this.vm.$data[this.exp];
      }

**效果**

![在这里插入图片描述][20200310164417639.gif]

[20200310164417639.gif]: https://img-blog.csdnimg.cn/20200310164417639.gif