Nuxt3中自定义Vue3指令仅挂载后更新样式问题排查

问题原因 #

你遇到的闪烁问题本质是SSR渲染与客户端hydrate的时机不匹配：

• 服务端渲染时，自定义指令的created/beforeMount钩子中操作el.style不会生效——因为服务端没有真实DOM，无法修改元素的style对象，生成的HTML中元素默认是visibility: visible。
• 客户端hydrate完成后，指令才会执行并设置visibility: hidden，导致元素先显示再隐藏，出现闪烁。

解决方案 #

修改自定义指令，针对SSR环境通过setAttribute直接注入样式到HTML结构中，确保客户端拿到的初始HTML就包含正确的visibility设置：

import type { DirectiveBinding } from 'vue'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    created(el: HTMLElement, binding: DirectiveBinding<boolean>) {
      const visibilityValue = binding.value ? 'visible' : 'hidden'
      if (process.server) {
        // 服务端渲染时，通过setAttribute把样式写入HTML
        const existingStyle = el.getAttribute('style') || ''
        el.setAttribute('style', `${existingStyle} visibility: ${visibilityValue};`)
      } else {
        // 客户端直接修改style属性
        el.style.visibility = visibilityValue
      }
    },
    updated(el: HTMLElement, binding: DirectiveBinding<boolean>) {
      // 后续更新时直接修改样式
      el.style.visibility = binding.value ? 'visible' : 'hidden'
    }
  })
})

替代方案（更简单） #

如果不需要指令，直接用动态样式绑定也能避免闪烁，因为SSR会直接把样式渲染到HTML中：

<div :style="{ visibility: isVisible ? 'visible' : 'hidden' }">
  内容
</div>

内容的提问来源于stack exchange，提问作者Matej