一、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,可能影响性能。