Vue3和Vue2的差异系列之自定义指令

1,103 阅读2分钟

Vue除了核心功能默认的内置指令,如v-model、v-show等,还支持注册自定义指令。

钩子函数

  • 2.X
    • bind:指令绑定到元素后调用。只调用一次。
    • inserted:元素插入父 DOM 后调用。
    • update:当元素更新,但子元素尚未更新时,将调用此钩子。
    • componentUpdated:一旦组件和子级被更新,就会调用这个钩子。
    • unbind:一旦指令被移除,就会调用这个钩子。也只调用一次。
  • 3.X
    • created - 新增!在元素的 attribute 或事件监听器被应用之前调用。
    • bind → beforeMount
    • inserted → mounted
    • beforeUpdate:新增!在元素本身被更新之前调用,与组件的生命周期钩子十分相似。
    • update → 移除!该钩子与 updated 有太多相似之处,因此它是多余的。请改用 updated
    • componentUpdated → updated
    • beforeUnmount:新增!与组件的生命周期钩子类似,它将在元素被卸载之前调用。
    • unbind -> unmounted

钩子函数参数

  • 2.X image.png
  • 3.X image.png

自定义权限指令

在 Vue 中,代码复用和抽象的主要形式是组件。然而,有的情况下,我们仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
在实际开发项目过程中,尤其是开发后管平台,我们往往会遇到用户权限相关的判断。日常开发中权限控制有两种情况,第一种情况是在路由拦截那里控制菜单栏的显示隐藏及跳转操作;第二种情况是页面上某一个按钮控制是否隐藏,这个时候可以用封装的v-permission命令控制dom元素的显示隐藏。
下面的示例中主要是用Vue3编写的,没有权限的就直接从父元素中移除该元素。

// permission.js

import store from '@/store';

export default {
  mounted(el, binding, vnode) {
    const { value } = binding;
    const roles = store.getters && store.getters.roles;
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value;
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role);
      });

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`need roles! Like v-permission="['admin','editor']"`);
    }
  }
};


// index.js

import permission from './permission'
const install = (Vue) => {
  Vue.directive('permission', permission)
}
if (window.Vue) {
  window['permission'] = permission
  Vue.use(install)
}
permission.install = install
export default permission