cn-huan / mini_vue

模拟vue封装mvvm，同时模拟axios封装ajax，以及封装wesocket，并整合

模拟vue进行封装，实现MVVM，同时实现了v-if，v-show，v-on，v-text，v-bind，v-model，模板字符串等指令
实现了beforeCreate，created，beforeMount，mounted生命周期
参考axios思路进行封装ajax，方便快速发起http请求
以及封装了websocket，快速发送消息，处理消息，以及断线自动重连并将它们全部整合

---

vue构造函数

function Vue(options) {
  // 执行beforeCreate生命周期
  if (options.beforeCreate) {
    options.beforeCreate.call(this);
  }

  // 给this添加代理
  this.$vm = this._proxy(this);
  let _this = this.$vm;

  _this.$options = options || {};
  _this.$data =
    typeof options.data === "function" ? options.data() : options.data;

  // 初始化data数据
  this.initData(_this, _this.$data);

  // 初始化methods，改变函数this指向同时挂载到实例上面
  this.initMethods(_this, options.methods);

  // 执行created生命周期
  if (options.created) {
    options.created.call(_this);
  }

  // 执行beforeMount生命周期
  if (options.beforeMount) {
    options.beforeMount.call(_this);
  }

  // 挂载节点
  _this.$el = document.getElementById(options.el);
  // 解析模板 并创建订阅发布者
  new Compiler(_this);

  // 执行mounted生命周期
  if (options.mounted) {
    options.mounted.call(_this);
  }

  return _this;
}

详细代码请下载查看