Vue数据驱动模拟实现2

下面我将详细讲解“Vue数据驱动模拟实现2”的完整攻略。

什么是Vue数据驱动模拟实现2

Vue数据驱动模拟实现2是模拟Vue框架的数据响应式原理，实现双向数据绑定的简化版。其核心原理是依赖收集和观察者模式。

实现步骤

1. 实现一个Observer（观察者）对象，用于劫持变化和依赖收集。

function Observer(data) {
  this.data = data;
  this.walk(data);
}
Observer.prototype = {
  walk: function(data) {
    var self = this;
    Object.keys(data).forEach(function(key){
      self.defineReactive(data, key , data[key]);
    });
  },
  defineReactive: function(data, key, val) {
    var dep = new Dep(); 
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      get: function() {
        if (Dep.target) {
            dep.depend();      
        }
        return val; 
      },
      set: function(newVal) {
        if (val === newVal) {
            return;
        }
        val = newVal; 
        dep.notify(); 
      }
    });
  },
};

1. 实现一个Watcher（观察者）对象，用于更新视图。

function Watcher(vm, exp, cb) {
  this.vm = vm;
  this.exp = exp;
  this.cb = cb;
  this.value = this.get(); // 获取当前值，主要是触发依赖收集
}
Watcher.prototype = {
  update: function() {
    var value = this.get();
    if (value !== this.value) {
       this.cb.call(this.vm, value, this.value);
       this.value = value;
    }
  },
  get: function() {
    Dep.target = this; 
    var value = this.getVMVal(); 
    Dep.target = null; 
    return value;
  },
  getVMVal: function() {
    var exp = this.exp.split('.');
    var val = this.vm._data;
    exp.forEach(function(k) {
      val = val[k];
    });
    return val;
  }
};

1. 实现一个Dep对象，用于管理Watcher对象和数据的关系。

function Dep() {
  this.subs = []; 
}
Dep.target = null; 
Dep.prototype = {
  addSub: function(sub) {
    this.subs.push(sub);
  },
  depend: function() {
    Dep.target.addDep(this);
  },
  notify: function() {
    this.subs.forEach(function(sub) {
      sub.update();
    });
  }
};

1. 实现一个Compile对象，用于解析DOM结构，建立起依赖关系。

function Compile(el, vm) {
  this.el = document.querySelector(el);
  this.vm = vm;
  this.fragment = null; 
  this.init();
}
Compile.prototype = {
  init: function() {
    if (this.el) {
      this.fragment = this.nodeToFragment(this.el);
      this.compileElement(this.fragment);
      this.el.appendChild(this.fragment);
    }
  },
  nodeToFragment: function(el) {
    var fragment = document.createDocumentFragment();
    var child = el.firstChild;
    while (child) {
      fragment.appendChild(child);
      child = el.firstChild;
    }
    return fragment;
  },
  compileElement: function(el) {
    var childNodes = el.childNodes;
    var self = this;
    [].slice.call(childNodes).forEach(function(node) {
      var reg = /\{\{(.*)\}\}/;
      var text = node.textContent;
      if (self.isTextNode(node) && reg.test(text)) { 
        self.compileText(node, reg.exec(text)[1]);
      } else if (self.isElementNode(node)) { 
        self.compileElementNode(node);
      }
      if (node.childNodes && node.childNodes.length) {
        self.compileElement(node); 
      }
    });
  },
  compileText: function(node, exp) {
    var self = this;
    var initText = this.vm[exp];
    this.updateText(node, initText); 
    new Watcher(this.vm, exp, function(value) { 
      self.updateText(node, value);
    });
  },
  compileElementNode: function(node) {
    var self = this;
    var attrs = node.attributes;
    Array.prototype.forEach.call(attrs, function(attr) {
      var attrName = attr.name;
      if (self.isDirective(attrName)) {
        var exp = attr.value; 
        var dir = attrName.substring(2);
        if (self.isEventDirective(dir)) { 
          self.compileEvent(node, self.vm, exp, dir);
        } else { 
          self.compileModel(node, self.vm, exp, dir);   
        }
        node.removeAttribute(attrName);
      }
    });
  },
  compileEvent: function(node, vm, exp, dir) {
    var eventType = dir.split(':')[1];
    var cb = vm.methods && vm.methods[exp];
    if (eventType && cb) {
      node.addEventListener(eventType, cb.bind(vm), false);
    }
  },
  compileModel: function(node, vm, exp, dir) {
    var self = this;
    var val = vm[exp];
    this.modelUpdater(node, val);
    new Watcher(vm, exp, function(value) {
        self.modelUpdater(node, value);
    });
    node.addEventListener('input', function(e) {
        var newValue = e.target.value;
        if (val === newValue) {
            return;
        }
        vm[exp] = newValue;
        val = newValue;
    });
  },
  isDirective: function(attr) {
    return attr.indexOf('v-') === 0;
  },
  isEventDirective: function(dir) {
    return dir.indexOf('on:') === 0;
  },
  isTextNode: function(node) {
    return node.nodeType === 3;
  },
  isElementNode: function(node) {
    return node.nodeType === 1;
  },
  updateText: function(node, value) {
    node.textContent = typeof value === 'undefined' ? '' : value;
  },
  modelUpdater: function(node, value, oldValue) {
    node.value = typeof value === 'undefined' ? '' : value;
  }
};

1. 实例化Vue对象，传入数据并建立依赖关系。

function Vue(options) {
  var self = this;
  this.data = options.data;
  this.methods = options.methods;
  Object.keys(this.data).forEach(function(key) {
    self.proxyKeys(key);
  });
  observe(this.data);
  new Compile(options.el, this);
}

Vue.prototype = {
  proxyKeys: function(key) {
    var self = this;
    Object.defineProperty(this, key, {
      enumerable: false,
      configurable: true,
      get: function getter() {
        return self.data[key];
      },
      set: function setter(newVal) {
        self.data[key] = newVal;
      }
    });
  }
};

function observe(value, vm) {
  new Observer(value);
}

示例说明

示例1：更新输入值实时同步到视图

<div id="app">
  <input type="text" v-model="message">
  <p>输入的值是：{{ message }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
});

当用户在输入框中输入新的值时，会实时同步到页面视图中。

示例2：点击按钮修改数据

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="changeMessage">Change message</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    changeMessage: function () {
      this.message = 'Welcome to Vue.js!'
    }
  }
});

当用户点击按钮时，会修改data对象中的message值，并将页面视图实时更新。