能否重写VueJS内置v-show指令？自定义修饰符方案遇阻

我想给v-show指令添加一个important修饰符，于是复制了v-show的源码并添加了该修饰符。但尝试注册同名指令时：

import { vShow } from "@/directives/vShow"
// ...
const app = createApp(App)
  .directive("show", vShow)
  // ...
  .mount("#app")

Vue仍然使用内置的v-show，完全没效果；但换成新指令名（比如v-cshow）就能正常运行：

const app = createApp(App)
  .directive("cshow", vShow)
  // ...
  .mount("#app")

核心原因 #

Vue的内置指令优先级高于用户自定义指令，直接注册同名指令会被Vue忽略，没法覆盖内置实现。

可行解决方案 #

1. 使用自定义指令（推荐）

直接用新指令名（比如v-cshow）是最简单稳妥的方式，既不影响原有v-show的使用，又能实现你要的important修饰符功能，不用折腾复杂的内部逻辑。

2. 通过编译时修改AST替换v-show逻辑

如果一定要复用v-show这个指令名，可以通过修改Vue的模板编译逻辑，把所有v-show的处理替换成你的自定义实现。具体做法是在创建app时配置compilerOptions，添加AST转换钩子：

import { createApp } from 'vue'
import App from './App.vue'
import { myVShow } from './directives/vShow'

const app = createApp(App, {
  compilerOptions: {
    transformNode(node) {
      // 识别带有v-show指令的元素节点
      if (node.type === 1 && node.props.some(p => p.type === 7 && p.name === 'show')) {
        const originalShowProp = node.props.find(p => p.type ===7 && p.name ==='show')
        // 移除原有的v-show指令
        node.props = node.props.filter(p => !(p.type === 7 && p.name === 'show'))
        // 添加自定义指令，复用原指令的表达式和修饰符
        node.props.push({
          type: 7,
          name: 'cshow',
          exp: originalShowProp?.exp,
          modifiers: originalShowProp?.modifiers
        })
      }
      return node
    }
  }
})

app.directive('cshow', myVShow)
app.mount('#app')

这种方式会在模板编译阶段把所有v-show替换成你的自定义指令，相当于间接“覆盖”了v-show的行为，但注意这种方式只适用于Vue的完整版（runtime+compiler），如果用的是runtime-only版本，需要在Vite、Webpack等构建工具中配置对应的编译选项。

3. 修改Vue内部API（不推荐）

可以通过修改Vue的内部directives对象来替换v-show的实现，但这种方式依赖Vue的私有内部API，版本更新时极易失效，还可能引发未知问题，不建议在生产环境使用。

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