自定義指令的鉤子函數

Vue 提供了自定義指令的5個鉤子函數：

• bind：指令第一次綁定到元素時調用，只執(zhí)行一次。在這里可以進行一次性的初始化設置。
• inserted：被綁定的元素，插入到父節(jié)點DOM時被調用。
• update：綁定元素更新時調用。
• componentUpdated：綁定元素與子元素更新時調用。
• unbing：只調用一次，指令與元素解綁時調用。

鉤子函數的參數 (即 el、binding、vnode 和 oldVnode)。

• el：指令所綁定的元素，可以用來直接操作 DOM。

• binding：一個對象，包含以下 property：
  name：指令名，不包括 v- 前綴。
  value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
  oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
  arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數為 "foo"。
  modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。

項目中 el + binding.value 就夠用了,比如網上搜的一個例子,函數節(jié)流指令：

<template>
 <div>
  <el-input
   type="text"
   v-model="text"
   v-debounce="search" showClear
  >
  </el-input>
 </div>
</template>
<script>
 export default {
  name: 'debounce',
  data () {
   return {
    text: '',
    count: 1
   }
  },
  directives: {
   debounce: {
    inserted: function (el, binding) {
       let input =  el.querySelector('input')
     let timer
     input.addEventListener('keyup', () => {
      if (timer) {
       clearTimeout(timer)
      }
      timer = setTimeout(() => {
       binding.value()
      }, 300)
     })
    }
   }
  },
  methods: {
   search () {
   // 實際要進行的操作 axios.get('')之類的
    this.count++
    console.log('count is:' + this.count)
   }
  }
 }
</script>

本來那個input 是原生元素，想試試組件el-input支持不 結果還真支持，所以看了下組件源碼，結果這里的el只是input的父元素div!!!el-input沒有做任何操作，而且支監(jiān)聽div的keyup起到節(jié)流效果，沒有任何問題？？？ 一臉黑人問號。。。求大神解釋

為了安全起見 還是綁定給input了。