vue3自定义指令如何绑定动态参数？

Question

<template>
  <div>
    <button v-custom="{ goodsId, event: getFun }">按钮</button>
  </div>
</template>

<script setup lang="ts">
const goodsId = ref(100);
setTimeout(() => {
  goodsId.value = 200;
}, 1000);

setTimeout(() => {
  goodsId.value = 300;
}, 3000);

setTimeout(() => {
  goodsId.value = 400;
}, 4000);
const getFun = (e: any) => {
  console.log("点击事件", e);
};
</script>

import { Directive } from "vue";

const custom: Directive = {
  mounted(el, binding, vnode) {
    el.__onClick__ = () => {
      let { goodsId, event } = binding.value;
      event(goodsId);
    };
    el.addEventListener("click", el.__onClick__);
  }
};

export default custom;

每次点击都要获取最新的goodsId，当前这个写法只能获取初始的goodsId: 100，自定义指令无法获取到goodsId的最新值。
尝试过的方法：
1、在updated内再一次获取最新值，但是每次点击，事件会触发多次。
2、在vnode上获取最新值，同样无法获取到最新值。
在此想请教一下各位

Answer 1

在 update 中获取最新值时删除旧的回调函数。

Answer 2

指令 v-custom="{ goodsId, event: getFun }"是在模板中使用的, vue会unref,导致 mounted的时候 binding的value中goodsId的值是具体的值,而不是ref. 所以你可以使用 reactive而不是ref.

Answer 3

多年前写过关于vue指令的文档，https://segmentfault.com/a/1190000018767046

里面有个问题和这个问题类似，直接拉到文章最后面看解决方案，应该有点借鉴之处