1.vue的MVVM响应式原理介绍——vue源码解析

---

一、vue的MVVM是什么？

MVVM是Model-View-ViewModel的简写。它模式是MVC—>MVP—>MVVM的进化版。 Model负责用JavaScript对象表示，View负责UI界面显示，两者做到了最大限度的分离。 而把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的界面修改同步回Model更新数据。

二、操作步骤

在App.vue文件中，引入MVue.js，将el挂在到MVue上

指令解析器compile

在MVue.js文件中实现一个指令解析器compile
代码如下（示例）：

class Compile {
  constructor(el, vm) {
    this.el = this.isElementNode(el) ? el : document.querySelector(el);
    this.vm = vm;
    //1.获取文档碎片对象，放入内存中会减少页面的回流和重绘
    const fragment = this.node2Fragment(this.#el);
    console.log(fragment);
    //2.编译模板
    this.compile(fragment);
    //2.追加子元素到根元素
    this.el.appendChild(fragment);
  }

  compile(fragment) {
    //1.获取子节点
    const childNodes = fragment.childNodes;
    childNodes.forEach(child => {
      if (this.isElementNode(child)) {
        //是元素节点
        //编译元素节点
        console.log("元素节点", child);
      } else {
        //文本节点
        //编译文本节点
        console.log("文本节点", child);
      }
      if (child.childNodes && child.childNodes.length) {
        this.compile(child);
      }
    });
  }
  node2Fragment(el) {
    //创建文档碎片
    const f = document.createDocumentFragment();
    let firstChild;
    while ((firstChild = el.firstChild)) {
      f.appendChild(firstChild);
    }
    return f;
  }
  isElementNode(ndoe) {
    return node.nodeType === 1;
  }
}
class Mvue {
  constructor(options) {
    this.$el = options.el;
    this.$data = options.data;
    this.$options = options.options;
    if (this.$el) {
      //1.实现一个数据观察者
      //2.实现一个指令解析器
      new Compile(this.$el, this);
    }
  }
}

数据监听器observer

实现一个数据监听器observer

watcher

实现一个watcher去更新视图

proxy代理

实现一个proxy代理，劫持数据

总结

bad afternoon