Vue3相对于Vue2的进步：更灵活的自定义指令

1. 简介

Vue.js是一款流行的JavaScript框架，用于构建用户界面和单页应用程序。Vue.js早期版本已经在世界各地的许多Web应用程序中得到广泛应用。不久前，Vue.js的最新版本Vue3发布了。Vue3相较于前几个版本有的进步非常明显，本文将着重讲解Vue3相对于Vue2的一个重大进步：更灵活的自定义指令。

2. Vue2中自定义指令的缺陷

Vue2中，自定义指令具有一定的局限性，因为它们只能与DOM元素绑定和交互。这意味着它们不能与组件和其他Vue特性（如计算属性或侦听器）直接交互。 在Vue2的自定义指令中，指令分为两个钩子函数：bind和update。

2.1 bind钩子函数

bind钩子函数提供了一次性操作DOM的机会，可以在指令第一次绑定到元素时执行。这主要用于添加事件处理程序或执行一些初始DOM操作。

Vue.directive('custom-directive', {

  bind: function(el, binding) {
    el.style.backgroundColor = binding.value
  }
})

上面的自定义指令该怎么理解呢？ 给这个自定义指令传入一个参数color，这个参数50%地改变了DOM元素的背景颜色。使用v-custom-directive="'green'"指令时，黄色变成了绿色。

2.2 update钩子函数

update钩子函数每当指令的绑定值发生更改时均会被调用，无论它们是由v-指令中的表达式更新还是通过直接应用Vue的$set方法的结果更改。在这个钩子函数中，您可以更改元素的样式，类或触发其他操作，以便在指令值更改时更新DOM。

Vue.directive('custom-directive', {

  update: function(el, binding) {
    el.style.backgroundColor = binding.value
  }
})

与上面的例子不同的是，该示例在DOM元素的背景颜色发生更改时执行一些操作。

3. Vue3中更灵活的自定义指令

在Vue3中，自定义指令已经被赋予了更加灵活的能力。使用自定义指令更容易与组件交互，并且它们还可以与其他Vue特性完全交互，例如计算属性，侦听器等。

3.1 指令钩子函数

在Vue3中，自定义指令已被简化，只有一个钩子函数init。该函数接收3个参数：el，binding和vnode。意旨指令的初始化函数只在元素首次渲染时调用。

const app = Vue.createApp({

  template: `
    <div v-custom-directive></div>
  `,
  directives: {
    'custom-directive': {
      beforeMounted(el, binding, vnode) {
        el.style.backgroundColor = 'red'
      }
    }
  }
})

上面的自定义指令在第一次DOM元素渲染时设置背景颜色为红色。另外，在Vue3中还可以以以下方式定义指令：

app.directive('custom-directive', {

  beforeMounted(el, binding, vnode) {
    el.style.backgroundColor = 'red'
  }
})

这样就可以将自定义指令定义为全局指定，而不是在局部组件中定义。

3.2 自定义指令与组件交互

在Vue3中，指令可以轻松地与组件交互。例如，您可以将自定义指令添加到指定组件上，并从组件的计算属性中访问指令绑定的数据。

const app = Vue.createApp({

  template: `
    <div>
      <my-component v-custom-directive="'dark-blue'"></my-component>
    </div>
  `,
  components: {
    'my-component': {
      template: `
        <div></div>
      `,
      directives: {
        'custom-directive': {
          beforeMounted(el, binding, vnode) {
            console.log(binding.value) // 'dark-blue'
          }
        }
      }
    }
  }
})

此示例将v-custom-directive指令添加到组件my-component上。在my-component指令中，使用binding.value访问父组件中定义的指令值'dark-blue'。

4. 总结

Vue3中自定义指令的改进使其更加灵活和功能强大。指令可以轻松与组件交互，并可以与其他Vue特性完全交互，例如计算属性，侦听器等。如果您使用Vue.js构建应用程序，则应该考虑Vue3中自定义指令的改进。