Vue3自定义click-outside指令不支持表达式写法如何修复

出现报错的核心差异在于Vue对内置v-on指令和自定义指令的编译逻辑不同：

• 编译v-on（即@前缀）类事件指令时，Vue会自动将内联赋值语句、带括号的函数调用等表达式包裹成匿名函数，等到事件触发时才执行，因此拿到的绑定值永远是可执行的函数。
• 自定义指令的绑定值默认会被立即求值：比如写v-click-outside="close()"时，组件渲染阶段就会直接执行close()，binding.value拿到的是close()的返回值而非函数本身；写v-click-outside="opened = false"时，binding.value拿到的是赋值后的布尔值，自然会抛出类型错误。

方案一：轻量修改（无需改编译配置，99%场景适用） #

只需给指令添加类型判断，同时要求内联表达式用箭头函数包裹即可，改造成本极低，性能无损耗：

第一步：修改指令定义代码 #

vueApp.directive('click-outside', {
  beforeMount(el, binding, vnode) {
    el.clickOutsideEvent = (evt) => {
      evt.stopPropagation();
      if (!(el === evt.target || el.contains(evt.target))) {
        // 新增类型判断，仅当绑定值为函数时执行，避免报错
        if (typeof binding.value === 'function') {
          binding.value(evt, el);
        }
      }
    }
    // 等待1帧避免挂载元素的点击操作立即触发点击外部事件
    window.requestAnimationFrame(() => { document.addEventListener('click', el.clickOutsideEvent) });
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  },
});

第二步：内联表达式写法调整（仅加箭头函数包裹） #

<!-- 赋值表达式写法 -->
<div v-if="opened" v-click-outside="() => opened = false">
    部分内容
</div>
<!-- 带参数的函数调用写法 -->
<div v-if="opened" v-click-outside="() => close(param1, param2)">
    部分内容
</div>
<!-- 原有传函数名的写法完全兼容，无需改动 -->
<div v-if="opened" v-click-outside="close">
    部分内容
</div>

方案二：完全兼容原生@click写法（需配置编译规则） #

如果要完全和内置@click指令写法一致，不需要写箭头函数，可以通过配置Vue模板编译器的自定义指令转换规则，让编译器自动给v-click-outside的绑定值包裹匿名函数。
以Vite配置为例，修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 注册自定义指令的转换逻辑
          directiveTransforms: {
            'click-outside': (dir) => {
              return {
                props: [{
                  // 把指令绑定值自动包裹成匿名函数
                  value: dir.exp ? `() => { ${dir.exp} }` : dir.value
                }]
              }
            }
          }
        }
      }
    })
  ]
})

配置完成后就可以直接写v-click-outside="opened = false"或者v-click-outside="close()"，无需额外包裹箭头函数，和原生@click用法完全一致。

内容的提问来源于stack exchange，提问作者Arno van Oordt