Vue是如何實(shí)現(xiàn)的

<div id="name"></div>

var obj = {};
Object.defineProperty(obj,"name",{
  get() {
    return document.querySelector("#name").innerHTML;
  },
  set(val) {
    document.querySelector("#name").innerHTML = val;
  }
})
obj.name = "Aaron";

<div id="app">
  <p>{{name}}</p>
  <p q-text="name"></p>
  <p>{{age}}</p>
  <p>{{doubleAge}}</p>
  <input type="text" q-model="name"/>
  <button @click="changeName">點(diǎn)擊</button>
  <div q-html="html"></div>
</div>
<script>
new QVue({
  el:"#app",
  data:{
    name:"I am test",
    age:12,
    html:"<button>這是一個(gè)后插入的按鈕</button>"
  },
  created(){
    console.log("開(kāi)始吧,QVue");
    setTimeout(() => {
      this.name = "測(cè)試數(shù)據(jù)，更改了么";
    },2000)
  },
  methods:{
    changeName(){
      this.name = "點(diǎn)擊啦，改變吧";
      this.age = 1000000;
    }
  }
})
</script>

class QVue {
  constructor(options){
    // 緩存options對(duì)象數(shù)據(jù)
    this.$options = options;
    // 取出data數(shù)據(jù)，做數(shù)據(jù)響應(yīng)
    this.$data = options.data || {};
  }
}

class QVue {
  constructor(options){
    this.$options = options;
    // 數(shù)據(jù)響應(yīng)
    this.$data = options.data || {};
    // 監(jiān)聽(tīng)數(shù)據(jù)變化
    this.observe(this.$data);
    // 主要用來(lái)解析各種指令，比如v-modal，v-on:click等指令
    new Compile(options.el,this);
    // 執(zhí)行生命周期
    if(options.created){
      options.created.call(this);
    }
  }
  // 觀察數(shù)據(jù)變化
  observe(value){
    if(!value || typeof value !== "object"){
      return;
    }
    let keys = Object.keys(value);
    keys.forEach((key)=> {
      this.defineReactive(value,key,value[key]);
      // 代理data中的屬性到vue實(shí)例上
      this.proxyData(key);
    })
  }
  // 代理Data
  proxyData(key){
    Object.defineProperty(this,key,{
      get(){
        return this.$data[key];
      },
      set(newVal){
        this.$data[key] = newVal;
      }
    })
  }
  // 數(shù)據(jù)響應(yīng)
  defineReactive(obj,key,val){
    // 解決數(shù)據(jù)層次嵌套
    this.observe(val);
    const dep = new Dep();
    Object.defineProperty(obj, key,{
      get(){
        // 向管理watcher的對(duì)象追加watcher實(shí)例
        // 方便管理
        Dep.target && dep.appDep(Dep.target);
        return val;
      },
      set(newVal){
        if(newVal === val){
          return;
        }
        val = newVal;
        // console.log(`${key}更新了：${newVal}`)
        dep.notify();
      }
    })
  }
}

// 管理watcher
class Dep {
  constructor() {
    // 存儲(chǔ)
    this.deps = [];
  }
  // 添加watcher
  appDep(dep){
    this.deps.push(dep);
  }
  // 通知所有的watcher進(jìn)行更新
  notify(){
    this.deps.forEach((dep) => {
      dep.update();
    })
  }
}
// 觀察者 做具體更新
class Watcher {
  constructor(vm,key,cb){
    // Vue實(shí)例
    this.vm = vm;
    // 需要更新的key
    this.key = key;
    // 更新后執(zhí)行的函數(shù)
    this.cb = cb;
    // 將當(dāng)前watcher實(shí)例指定到Dep靜態(tài)屬性target
    // 用來(lái)在類間進(jìn)行通信
    Dep.target = this;
    // 觸發(fā)getter,添加依賴
    this.vm[this.key];
    Dep.target = null;
  }
  update(){
    this.cb.call(this.vm,this.vm[this.key]);
  }
}

class Compile {
  constructor(el,vm) {
    // 要遍歷的宿主節(jié)點(diǎn)
    this.$el = document.querySelector(el);
    this.$vm = vm;

    // 編譯
    if(this.$el){
      // 轉(zhuǎn)換宿主節(jié)點(diǎn)內(nèi)容為片段Fragment元素
      this.$fragment = this.node2Fragment(this.$el);
      // 執(zhí)行編譯過(guò)程
      this.compile(this.$fragment);
      // 將編譯完的HTML結(jié)果追加至宿主節(jié)點(diǎn)中
      this.$el.appendChild(this.$fragment);
    }
  }

  // 將宿主元素中代碼片段取出來(lái)，遍歷，這樣做比較高效
  node2Fragment(el){
    const frag = document.createDocumentFragment();
    // 將宿主元素中所有子元素**（搬家，搬家，搬家）**至frag中
    let child;
    // 如果 el.firstChild 為undefined或null則會(huì)停止循環(huán)
    while(child = el.firstChild){
      frag.appendChild(child);
    }
    return frag;
  }

  compile(el){
    // 宿主節(jié)點(diǎn)下的所有子元素
    const childNodes = el.childNodes;
    Array.from(childNodes).forEach((node) => {
      if(this.isElement(node)){
        // 如果是元素
        console.log("編譯元素"+node.nodeName)
        // 拿到元素上所有的執(zhí)行,偽數(shù)組
        const nodeAttrs = node.attributes;
        Array.from(nodeAttrs).forEach((attr) => {
          // 屬性名
          const attrName = attr.name; 
          // 屬性值
          const exp = attr.value;   
          // 如果是指令
          if(this.isDirective(attrName)){
            // q-text
            // 獲取指令后面的內(nèi)容
            const dir = attrName.substring(2);
            // 執(zhí)行更新
            this[dir] && this[dir](node,this.$vm,exp);
          }
          // 如果是事件
          if(this.isEvent(attrName)){
            // 事件處理
            let dir = attrName.substring(1);  // @
            this.eventHandler(node,this.$vm,exp,dir);
          }
        })
      }else if(this.isInterpolation(node)){
        // 如果是插值文本
        this.compileText(node);
        console.log("編譯文本"+node.textContent)
      }
      // 遞歸子元素，解決元素嵌套問(wèn)題
      if(node.childNodes && node.childNodes.length){
        this.compile(node);
      }
    })
  }
  // 是否為節(jié)點(diǎn)
  isElement(node){
    return node.nodeType === 1;
  }
  // 是否為插值文本
  isInterpolation(node){
    return node.nodeType === 3 && /\{\{(.*)\}\}/.test(node.textContent);
  }
  // 是否為指令
  isDirective(attr){
    return attr.indexOf("q-") == 0;
  }
  // 是否為事件
  isEvent(attr){
    return attr.indexOf("@") == 0;
  }

  // v-text
  text(node,vm,exp){
    this.update( node, vm, exp, "text");
  }
  textUpdater(node,value){
    node.textContent = value;
  }

  // 雙向綁定
  // v-model
  model(node,vm,exp){
    // 指定input的value屬性，模型到視圖的綁定
    this.update(node,vm,exp,"model");
    // 試圖對(duì)模型的響應(yīng)
    node.addEventListener('input',(e) => {
      vm[exp] = e.target.value;
    })
  }
  modelUpdater(node,value){
    node.value = value;
  }

  // v-html
  html(node,vm,exp){
    this.update(node,vm,exp,"html")
  }
  htmlUpdater(node,value){
    node.innerHTML = value;
  }
  
  // 更新插值文本
  compileText(node){
    let key = RegExp.$1;
    this.update( node, this.$vm, key, "text");
  }
  // 事件處理器
  eventHandler(node,vm,exp,dir){
    let fn = vm.$options.methods && vm.$options.methods[exp];
    if(dir && fn){
      node.addEventListener(dir,fn.bind(vm));
    }
  }

  // 更新函數(shù) - 橋接
  update(node,vm,exp,dir){
    const updateFn = this[`${dir}Updater`];
    // 初始化
    updateFn && updateFn(node,vm[exp]);
    // 依賴收集
    new Watcher(vm,exp,function(value){
      updateFn && updateFn(node,value);
    })
  }
}