Vue2与Vue3自定义指令的区别

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它提供了一种简洁的方式来处理数据和DOM的交互。在Vue.js中，自定义指令是一种扩展Vue.js功能的方式，可以用于在DOM元素上添加特定的行为。

在Vue.js 2中，自定义指令通过Vue.directive方法来定义。自定义指令可以用于操作DOM元素、监听事件、修改样式等。例如，我们可以创建一个自定义指令来实现点击元素时改变背景颜色的功能：

Vue.directive('change-color', {
  bind: function (el, binding) {
    el.addEventListener('click', function () {
      el.style.backgroundColor = binding.value;
    });
  }
});

在上面的例子中，我们使用bind钩子函数来绑定指令，并在元素上添加点击事件监听器。当点击元素时，会根据指令的值来改变元素的背景颜色。

而在Vue.js 3中，自定义指令的写法有所改变。Vue.js 3引入了createApp方法来创建应用程序实例，并使用app.directive方法来定义自定义指令。例如，我们可以使用Vue.js 3的语法来重新实现上述的自定义指令：

const app = Vue.createApp({});

app.directive('change-color', {
  mounted(el, binding) {
    el.addEventListener('click', function () {
      el.style.backgroundColor = binding.value;
    });
  }
});

app.mount('#app');

在上面的例子中，我们使用mounted钩子函数来绑定指令，并在元素上添加点击事件监听器。当点击元素时，会根据指令的值来改变元素的背景颜色。

总结一下，Vue.js 2和Vue.js 3中的自定义指令的定义方式有所不同，但都可以用于扩展Vue.js的功能，实现特定的行为。