vue2和vue3自定义指令实现按钮权限

一、Vue 2 自定义指令

根据权限判断是否渲染元素

// 注册一个全局自定义指令 `v-permission`
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    // 假设用户的权限信息存储在一个全局对象中
    const userPermissions = vnode.context.$root.$data.userPermissions;
    const requiredPermission = binding.value;

    // 判断用户是否有权限
    if (!userPermissions.includes(requiredPermission)) {
      // 没有权限时移除元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

// 使用方法
// <button v-permission="'edit'">编辑</button>
// 其中 `'edit'` 是所需的权限标识符

二、Vue 3 自定义指令

根据权限判断是否渲染元素

// 注册一个全局自定义指令 `v-permission`
const app = Vue.createApp({});

app.directive('permission', {
  mounted(el, binding, vnode) {
    // 假设用户的权限信息存储在一个全局对象中
    const userPermissions = vnode.context.$root.$data.userPermissions;
    const requiredPermission = binding.value;

    // 判断用户是否有权限
    if (!userPermissions.includes(requiredPermission)) {
      // 没有权限时移除元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
});

// 使用方法
// <button v-permission="'edit'">编辑</button>
// 其中 `'edit'` 是所需的权限标识符

三、区别与优缺点

区别

• 元素移除的时机:
  • 在 Vue 2 中，inserted 钩子在元素插入 DOM 后调用。
  • 在 Vue 3 中，mounted 钩子在元素挂载到 DOM 后调用。
• 指令的使用方式:
  • 两个版本的指令使用方式相同，都是通过传递权限标识符来判断。

优缺点
Vue 2

• 优点:
  • 简单直接，特别适合已有的 Vue 2 项目。
  • 使用 inserted 钩子，在元素插入 DOM 后立刻进行权限判断和处理
• 缺点:
  • 直接操作 DOM，可能影响性能，特别是在复杂的条件和频繁的更新场景中。

Vue 3
优点:

• 提供了更多的生命周期钩子，可以更精细地控制元素的生命周期。
• 支持 Composition API，可以更好地组织和复用代码。

缺点:

• 同样直接操作 DOM，可能影响性能。