compileText (n) {
    // 獲取表達式
    // n.textContent = this.$vm[RegExp.$1]
    // n.textContent = this.$vm[RegExp.$1.trim()]
    this.update(n, RegExp.$1.trim(), 'text')
  }
  text (node, exp) {
    this.update(node, exp, 'text')
    // node.textContent = this.$vm[exp] || exp
  }
  html (node, exp) {
    this.update(node, exp, 'html')
    // node.innerHTML = this.$vm[exp]
  }

  update (node, exp, dir) {
    // 第一步： 初始化值
    const fn = this[dir + 'Updater']
    fn && fn(node, this.$vm[exp])
  }
  textUpdater (node, val) {
    node.textContent = val
  }
  htmlUpdater (node, val) {
    node.innerHTML = val
  }

  update (node, exp, dir) {
    // 第一步： 初始化值
    const fn = this[dir + 'Updater']
    fn && fn(node, this.$vm[exp])
    // 第二步： 更新
    new Watcher(this.$vm, exp, val => {
      fn && fn(node, val)
    })
  }

// 監(jiān)聽器：負責依賴更新
class Watcher {
  constructor (vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn
  }
  update () {
    // 綁定作用域為this.vm，并且將this.vm[this.key]作為值傳進去
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}

const watchers = []
class Watcher {
  constructor (vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn
    watchers.push(this)
  }
  update () {
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}
function defineReactive (obj, key, val) {
  // 遞歸
  // val如果是個對象，就需要遞歸處理
  observe(val)
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get () {
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set (newVal) {
      if (newVal !== val) {
        val = newVal
        // 新值如果是對象，仍然需要遞歸遍歷處理
        observe(newVal)
        //暴力的寫法，讓一個人干事指揮所有人動起來(不管你需不需要更新，全給我更新一遍)
        watchers.forEach(watch => {
           watch.update()
        })
      }
    }
  })
}

class Dep {
  constructor () {
    this.deps = []
  }
  addDep (dep) {
    this.deps.push(dep)
  }
  notify () {
    this.deps.forEach(dep => dep.update())
  }
}

class Watcher {
  constructor (vm, key, updateFn) {
    this.vm = vm
    this.key = key
    this.updateFn = updateFn
    // 觸發(fā)依賴收集,使用一個靜態(tài)變量target去保存對應(yīng)的Watcher
    Dep.target = this
    // 主動訪問vm[key],觸發(fā)一下getter
    this.vm[this.key]
    Dep.target = null
  }
  update () {
    // 綁定作用域為this.vm，并且將this.vm[this.key]作為值傳進去
    this.updateFn.call(this.vm, this.vm[this.key])
  }
}

function defineReactive (obj, key, val) {
  observe(val)
  const dep = new Dep()
  Object.defineProperty(obj, key, {
    get () {
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set (newVal) {
      if (newVal !== val) {
        val = newVal
        observe(newVal)
        dep.notify()
      }
    }
  })
}

// 最簡形式，省略了value的顯式綁定，省略了oninput的顯式事件監(jiān)聽，是第二句代碼的語法糖形式
<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
//第二句代碼的簡寫形式
<input :value="sth" @input="sth = $event.target.value" />

 model (node, exp) {
   node.value = this.$vm[exp]
   node.addEventListener('input', (e) => {
     this.$vm[exp] = e.target.value
   })
 }