关于vue自定义指令控制元素显隐藏的问题

Question

 Vue.directive('haha', {
        1.
            // bind: function (el, binding, vnode, oldVnode) {
            //     let id = options.state.userInfo.uid;
            //     let className = el.getAttribute("class");
            //     className = className.concat(" hidden");
            //     el.setAttribute("class", className)
            //     authoxCheck(binding.value, id).then(function () {
            //         className = className.replace("hidden", "");
            //         el.setAttribute("class", className);
            //     }).catch(function () {});
            // },
      2.
           // inserted: function (el, binding, vnode, oldVnode) {
            //    let id = options.state.userInfo.uid;
            //    authoxCheck(binding.value, id).then(function () {}).catch(function () {
            //        el.parentNode.removeChild(el);
            //    });
            }
        })控制dom元素显隐藏的处理：1，bind钩子函数里添加display:none样式；
                                             2，inserted钩子函数里删除该元素；
应用场景：权限相关，没有操作权限就不显示该dom元素（可能是按钮，也可能是超链接等）
问题：抛开1中会出现在控制台取消样式后会显示出该元素的问题，以上两种方式哪种会更好？效率会更高一点？或者有没有更好的方式实现该应用场景？

Answer 1

看你的应用场景，如果权限可以实时变更（如果有个按钮可以控制权限变化）导致dom可能会发生隐藏显示状态变化，则第一种方式合适，如果dom状态基本不会发生变化，且内容又相对敏感，则第二种方式合适。