Vue的指令有哪些钩子函数、各是什么意思？【专栏14】

自定义指令使用场景

• 存在复杂业务逻辑处理，并且对dom更新相对较少，此时就会用到自定义指令
• 简化组件内部代码，此时就会用到自定义指令
• 当需要对普通 DOM 元素进行底层操作，此时就会用到自定义指令
• 需要减少代码改动，且存在多个相同业务逻辑的，此时就会用到自定义指令

自定义指令使用实例

const auths=["order","users","activity"];
const isAuth=(current)=>{
    const roles=localStorage.getItem("auths");
    const isR=current.some(item => auths.includes(item));
    return isR;
}

Vue.directive('auths', {
  //01
  bind: function (el, binding, vnode) {
  },
  //02
  inserted: function (el, binding) {
    const current  = binding.value
      if(!current||!isAuth(current)){
        el.parentNode && el.parentNode.removeChild(el);
      }
  },
  //03
  update: function (el, binding, vnode,oldVnode) {
  },
  //04
  componentUpdated: function (el, binding, vnode,oldVnode) {
  },
  //05
  unbind: function () {
  },
})

<template>
  <a v-auths="['order']">编辑订单</a>
</template>

触发顺序

如auths自定义指令中定义的顺序

自定义指令钩子函数

• bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
• inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• update:所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
• componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind: 只调用一次，指令与元素解绑时调用。

参考资料

• https://cn.vuejs.org/v2/guide/custom-directive.html