Skip to content

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

Notifications You must be signed in to change notification settings

cn-huan/mini_vue

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

模拟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;
}

详细代码请下载查看

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published