揭秘v-show与v-if原理，简化版自定义指令DIY！

Vue中的内置指令v-if和v-show是前端开发中的利器，它们可以控制节点的显示和隐藏。虽然它们的功能相似，但各自的实现原理却不同。

v-if

v-if指令通过条件渲染来控制节点的显示和隐藏。当指令绑定的表达式为true时，节点显示；当表达式为false时，节点隐藏。v-if指令是真正的条件渲染，它在编译阶段决定是否渲染节点，因此它对性能的影响很小。

v-show

v-show指令通过改变节点的display属性来控制节点的显示和隐藏。当指令绑定的表达式为true时，节点的display属性设置为"block"，节点显示；当表达式为false时，节点的display属性设置为"none"，节点隐藏。v-show指令不是真正的条件渲染，它只是改变了节点的显示状态，因此它对性能的影响很小。

简版v-show和v-if

我们可以通过JavaScript来实现简版v-show和v-if指令。

// 简版v-if指令
const vIf = {
  bind(el, binding) {
    if (!binding.value) {
      el.style.display = 'none';
    }
  },
  update(el, binding) {
    binding.value ? (el.style.display = 'block') : (el.style.display = 'none');
  }
};

// 简版v-show指令
const vShow = {
  bind(el, binding) {
    el.style.display = binding.value ? 'block' : 'none';
  },
  update(el, binding) {
    el.style.display = binding.value ? 'block' : 'none';
  }
};

// 注册指令
Vue.directive('v-if', vIf);
Vue.directive('v-show', vShow);

使用简版v-show和v-if指令，我们可以像使用Vue内置的指令一样控制节点的显示和隐藏。

<div v-if="show">显示</div>
<div v-show="show">显示</div>

当然，简版指令的功能并没有Vue内置指令那么强大，但它可以帮助我们理解指令的原理，并可以根据自己的需求进行定制。

在实际开发中，我们通常会使用Vue内置的v-if和v-show指令，因为它们的功能更强大，而且更稳定。但是，如果我们需要定制指令，或者需要对指令进行更细粒度的控制，那么我们可以考虑自己实现指令。