vue自定义指令，包装函数节流。

自定义指令的钩子函数

Vue 提供了自定义指令的5个钩子函数：

bind：指令第一次绑定到元素时调用，只执行一次。在这里可以进行一次性的初始化设置。
inserted：被绑定的元素，插入到父节点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 就够用了,比如网上搜的一个例子,函数节流指令：

<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没有做任何操作，而且支监听div的keyup起到节流效果，没有任何问题？？？一脸黑人问号。。。求大神解释

为了安全起见还是绑定给input了。

最后编辑于：2021.12.13 16:52:06