Vue3 自定义指令执行了两次的问题

下面是我注册全局指令的代码，这是我注册的一个通过 hljs 解析 html -> pre code 的指令，数据是异步获取的：

app.directive("parse-code", (el, binding) => {
  // ......
  console.log("execute!!!");
});

这样写是没有问题的，控制台打印一下：

执行了两次，我最开始以为是数据异步引起的。第一次：没有获取时执行一次；第二次：获取到了之后更新 DOM 执行了一次。然而，并不是我想的这样。查阅官方文档：

directive("parse-code", {
  // 在绑定元素的 attribute 前
  // 或事件监听器应用前调用
  created() {
    console.log("d-created");
  },
  // 在元素被插入到 DOM 前调用
  beforeMount() {
    console.log("d-beforeMount");
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted() {
    console.log("d-mounted");
  },
  // 绑定元素的父组件更新前调用
  beforeUpdate() {
    console.log("d-beforeUpdate");
  },
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated() {
    console.log("d-updated");
  },
  // 绑定元素的父组件卸载前调用
  beforeUnmount() {
    console.log("d-beforeUnmount");
  },
  // 绑定元素的父组件卸载后调用
  unmounted() {
    console.log("d-unmounted");
  }
});

指令有钩子函数，在 mounted 钩子函数里面注册指令：

app.directive("parse-code", {
  mounted() {
    console.log("execute!!!");
  }
});

控制台打印一下：

执行了一次，总结：写自定义指令最好写在钩子函数里面，以免多次执行。