自定义指令directives

Vue 允许我们自定义指令，可以通过 Vue.directive 定义全局指令，可以在组件 directives 钩子中定义局部自定义指令

全局自定义指令

Vue.directive('input', {
  inserted: function(el, binding) {
    ...
  }
})

参数如下：

局部自定义

局部自定义指令定义在 directives 钩子中

<template>
  <div id="app">
    <div>{{ j }}</div>
    <input type="text" v-model="btnName">
    <button v-throttle="{time: 1000, func: printLog}">节流{{ btnName }}</button>
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
      j:{
        x:10
      },
      btnName: ""
    }
  },
  methods:{
    printLog(){
      console.log("打印")
    }
  },
  mounted(){
    this.$set(this.j, "z", 100)
  },
  directives:{
    throttle:{
      bind(){
        // 点击节流指令
        console.log("bind只会调用一次，指令第一次被绑定到元素上时触发");
        debugger
      },
      inserted(element, binding){
        console.log("节流指令");
        console.log("inserted是被绑定元素插入到父节点中时触发")
        let t = function(){
          let timer
          return function(){
            if(!timer){
              timer = setTimeout(()=>{
                timer = null
              }, binding.value.time || 1000)
              binding.value.func()
            }
          }
        }
        element.onclick = t()
        debugger
      },
      update(){
        console.log("vnode更新时触发");
        debugger
      },
      componentUpdated() {
        console.log('所在组件的VNode对象和其子类VNode对象全部更新后调用');
        debugger
      },
      unbind(){
        console.log('指令解绑时候被调用');
        debugger
      }
    }
  }
}
</script>

声明周期

自定义指令生命周期包括 bind，inserted，update，componentUpdated和unbind

如上述局部自定义指令所示：

 指令被绑定到元素上时，bind 执行，但此时元素不一定被插入到文档流中，如下：

绑定的元素插入父节点时触发 inserted

如图中蓝框所示，此时 mounted 中 Vue.set 还没有执行

在 input 框中输入后，执行 update，此时可以看到页面还没有重新渲染

 

如图蓝框，页面重新渲染后，执行 componentUpdated

 

 解绑时，触发 unbind 钩子