vue2.0简单原理

let TARGET = null;

const utils = {

  getValue(expr, vm) {

    return vm.$data[expr.trim()];

  },

  setValue(expr, vm, newValue) {

    vm.$data[expr] = newValue;

  },

  model(node, value, vm) {

    const initValue = this.getValue(value, vm);

    new Watcher(value, vm, (newValue) => {

      console.log(value,vm);

      this.modelUpdater(node, newValue);

    });

    node.addEventListener('input', (e) => {

      const newValue = e.target.value;

      this.setValue(value, vm, newValue);

    });

    this.modelUpdater(node, initValue);

  },

  text(node, value, vm) {

    let result;

    if (value.includes('{{')) {

      // {{ xxx }}

      result = value.replace(/\{\{(.+?)\}\}/g, (...args) => {

        const expr = args[1];

        new Watcher(expr, vm, (newVal) => {

          this.textUpdater(node, newVal);

        })

        return this.getValue(args[1], vm);

      });

    } else {

      // v-text="xxx"

      result = this.getValue(value, vm);

    }

    this.textUpdater(node, result);

  },

  on(node, value, vm, eventName) {

    const fn = vm.$options.methods[value];

    node.addEventListener(eventName, fn.bind(vm), false);

  },

  textUpdater(node, value) {

    node.textContent = value;

  },

  modelUpdater(node, value) {

    node.value = value;

  }

}

// 一个 DOM 节点的依赖及更新

class Watcher {

  constructor(expr, vm, cb) {

    this.expr = expr;

    this.vm = vm;

    this.cb = cb;

    // 通过 getter 对数据进行绑定,标记当前的 watcher

    this.oldValue = this.getOldValue();

  }

  getOldValue() {

    TARGET = this;

    // 通过 getter 读取当前依赖

    const oldValue = utils.getValue(this.expr, this.vm);

    TARGET = null;

    return oldValue;

  }

  update() {

    const newValue = utils.getValue(this.expr, this.vm);

    if (newValue !== this.oldValue) {

      this.cb(newValue);

    }

  }

}

// 一个数据 key 的多个 watcher 依赖

class Dep {

  constructor() {

    this.collect = [];

  }

  addWatcher(watcher) {

    this.collect.push(watcher);

  }

  notify() {

    this.collect.forEach(w => w.update());

  }

}

class Compiler {

  constructor(el, vm) {

    this.el = this.isElementNode(el) ? el : document.querySelector(el);

    this.vm = vm;

    const fragment = this.compileFragment(this.el);

    this.compile(fragment);

    this.el.appendChild(fragment);

  }

  compile(fragment) {

    const childNodes = Array.from(fragment.childNodes);

    childNodes.forEach(childNode => {

      if (this.isElementNode(childNode)) {

        // 标签节点 h1 / input,读取属性,查看是否有 v- 开头的内容

        this.compileElement(childNode);

      } else if (this.isTextNode(childNode)) {

        // 内容文本节点 {{ msg }} 是否有双括号语法

        this.compileText(childNode);

      }

      if (childNode.childNodes && childNode.childNodes.length) {

        this.compile(childNode);

      }

    });

  }

  compileElement(node) {

    // v-model v-text v-on:click

    const attributes = Array.from(node.attributes);

    attributes.forEach(attr => {

      const { name, value } = attr;

      if (this.isDirector(name)) {

        // 指令 v-model, v-text, v-bind, v-on:click

        const [, directive] = name.split('-');

        const [compileKey, eventName] = directive.split(':');

        utils[compileKey](node, value, this.vm, eventName);

      } else if (this.isEventName(name)) {

        // @ 方法执行

        const [, eventName] = name.split('@');

        utils['on'](node, value, this.vm, eventName);

      }

    })

  }

  isDirector(name) {

    return name.startsWith('v-');

  }

  isEventName(name) {

    return name.startsWith('@');

  }

  compileText(node) {

    // {{ msg }}

    const content = node.textContent;

    if (/\{\{(.+)\}\}/.test(content)) {

      utils['text'](node, content, this.vm);

    }

  }

  compileFragment(el) {

    const f = document.createDocumentFragment();

    let firstChild;

    while(firstChild = el.firstChild) {

      f.appendChild(firstChild);

    }

    return f;

  }

  isTextNode(el) {

    return el.nodeType === 3;

  }

  isElementNode(el) {

    return el.nodeType === 1;

  }

}

class Observer {

  constructor(data,vm) {

    this.observe(data);

    this.vm = vm;

  }

  observe(data) {

    if (data && typeof data === 'object') {

      Object.keys(data).forEach(key => {

        this.defineReactive(data, key, data[key]);

      })

    }

  }

  defineReactive(obj, key, value) {

    this.observe(value);

    let _this  =this;

    const dep = new Dep();

    Object.defineProperty(obj, key, {

      get:()=>{

        const target = TARGET;

        TARGET && dep.addWatcher(target);

        return value; 

      },

      set: (newVal) => {

        if (value === newVal) return;

        this.observe(newVal);

        value = newVal;

        dep.notify();

      }

    })

  }

}

class Vue {

  constructor(options) {

    this.$el = options.el;

    this.$data = options.data;

    this.$options = options;

    // 触发 this.$data.xx 和模版的绑定

    new Observer(this.$data,this);

    // 处理模版部分,将模版中使用的 data 部分的变量和模版绑定起来

    new Compiler(this.$el, this);

    this.proxyData(this.$data)

  }

  // 可以通过 this.xx 更改 this.$data.xx 的结果

  proxyData(data) {

    Object.keys(data).forEach(key => {

      Object.defineProperty(this, key, {

        get() {

          return data[key];

        },

        set(newVal) {

          data[key] = newVal;

        }

      });

    })

  }

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,937评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,503评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,712评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,668评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,677评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,601评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,975评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,637评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,881评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,387评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,971评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2 342