Vue自定义指令中无法获取this的问题及解决

Vue自定义指令是Vue提供的一种扩展功能，可以在操作DOM的过程中实现很多自定义的业务逻辑。但是在Vue自定义指令中，经常会遇到无法获取this的问题。接下来，我将详细讲解这个问题的原因及解决方案，并提供两个示例。

问题原因

在Vue自定义指令中，this指向的是指令对象（Directive Object），而不是Vue实例（Vue Instance）。这意味着我们无法通过this来访问Vue实例中的数据或方法，在一些场景下会带来一些问题。

例如，在自定义一个v-loading指令实现异步操作时，需要在异步请求开始和结束时分别对DOM进行改变。如果我们想要改变Vue实例中的数据展示一个loading效果，也就是在异步请求开始时设置this.loading=true，在结束时设置this.loading=false。如果我们在自定义指令的bind和unbind钩子函数中通过this.$parent来访问Vue实例的话，就会遇到this指向问题。

解决方案

解决this指向问题最常见的方案是使用箭头函数。箭头函数的this指向是固定的，在箭头函数中，无论this在哪里调用，它都指向箭头函数外层包裹函数的this。

在Vue自定义指令中，我们可以通过在钩子函数内部使用箭头函数的方式来解决this指向问题，如下所示：

Vue.directive('loading', {
  bind: function(el, binding, vnode) {
    vnode.context.loading = false;

    const asyncFn = binding.value;
    el.addEventListener('click', async () => {
      vnode.context.loading = true;
      asyncFn().finally(() => {
        vnode.context.loading = false;
      });
    });
  }
});

上述代码中，我们在bind钩子函数中通过vnode.context的方式来访问Vue实例中的数据loading，并在点击事件中使用箭头函数来解决this指向问题。

除此之外，还可以将Vue实例作为参数传入自定义指令中，例如：

Vue.directive('loading', {
  bind: function(el, binding, vnode) {
    const vm = binding.arg;

    vm.loading = false;

    const asyncFn = binding.value;
    el.addEventListener('click', () => {
      vm.loading = true;
      asyncFn().finally(() => {
        vm.loading = false;
      });
    });
  }
});

这种方式需要在调用自定义指令的时候传入Vue实例作为参数，例如：

<button v-loading:[vm]="asyncFn">Click</button>

示例说明

示例一：
在Vue中实现一个自定义指令v-focus，当绑定的元素生成时，自动获取焦点。

Vue.directive('focus', {
  inserted: function(el) {
    el.focus();
  }
});

示例中，我们直接在inserted钩子函数中使用el.focus()来让当前元素获取焦点。因为不需要访问Vue实例中的数据，所以不需要解决this指向问题。

示例二：
在Vue中实现一个自定义指令v-loading，每当绑定的元素被点击时，显示一个loading效果。

<template>
  <button v-loading="getData">点击加载</button>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        data: null
      }
    },
    methods: {
      async getData() {
        this.loading = true;
        this.data = await fetch('xxxx/data').then(res => res.json());
        this.loading = false;
      }
    }
  }

  Vue.directive('loading', {
    bind: function(el, binding, vnode) {
      vnode.context.loading = false;

      const asyncFn = binding.value;
      el.addEventListener('click', async () => {
        vnode.context.loading = true;
        asyncFn().finally(() => {
          vnode.context.loading = false;
        });
      });
    }
  });
</script>

在示例中，我们通过自定义指令v-loading实现了一个简单的loading效果。在bind钩子函数中，我们通过vnode.context的方式访问了Vue实例中的loading数据，并在按钮被点击时改变它的值。这里使用箭头函数来解决this指向问题。