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!!!");

  }

});

控制台打印一下：

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

巴特西

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

最新文章

热门文章