vue2.x VS vue3.x：自定义指令实现简单的 v-model 指令

2024-01-04 23:52:30

前言

Vue.js 是一款流行的前端框架，以其简洁、灵活的特点受到开发者的喜爱。在 Vue.js 中，自定义指令是一个强大的特性，允许开发者扩展 Vue.js 的内置功能。本文将对比 vue2.x 和 vue3.x 在自定义指令实现方面的差异，并通过一个简单的 v-model 指令示例来说明。

vue2.x 中的自定义指令实现

在 vue2.x 中，自定义指令的实现相对简单。首先，我们需要创建一个 Vue 指令对象，其中包含指令的名称、方法和钩子函数。然后，我们将这个指令对象注册到 Vue 实例中。最后，我们可以在模板中使用这个自定义指令。

// 创建自定义指令对象
const MyDirective = {
  // 指令名称
  name: 'my-directive',
  // 指令方法
  bind(el, binding) {
    // 初始化指令
  },
  update(el, binding) {
    // 更新指令
  },
  unbind(el) {
    // 销毁指令
  }
};

// 注册自定义指令
Vue.directive('my-directive', MyDirective);

// 在模板中使用自定义指令
<div v-my-directive></div>

vue3.x 中的自定义指令实现

在 vue3.x 中，自定义指令的实现发生了较大的变化。首先，我们需要创建一个 directive 对象，其中包含指令的名称和工厂函数。然后，我们将这个 directive 对象注册到 Vue 实例中。最后，我们可以在模板中使用这个自定义指令。

// 创建 directive 对象
const MyDirective = {
  // 指令名称
  name: 'my-directive',
  // 工厂函数
  setup(el, binding) {
    // 初始化指令
  }
};

// 注册自定义指令
Vue.directive(MyDirective);

// 在模板中使用自定义指令
<div v-my-directive></div>

v-model 指令的实现

v-model 指令是一个非常常用的指令，它允许我们轻松地将表单元素与 Vue 实例中的数据绑定在一起。在 vue2.x 和 vue3.x 中，v-model 指令的实现都比较复杂，涉及到很多细节。但是，我们可以通过一个简单的示例来说明它的基本原理。

在 vue2.x 中，v-model 指令的实现需要用到 bind、update 和 unbind 这三个钩子函数。bind 钩子函数在指令第一次绑定到元素时调用，update 钩子函数在指令的值发生变化时调用，unbind 钩子函数在指令解除绑定时调用。

const VModelDirective = {
  name: 'v-model',
  bind(el, binding) {
    // 初始化指令
    el.value = binding.value;
    el.addEventListener('input', (e) => {
      binding.value = e.target.value;
    });
  },
  update(el, binding) {
    // 更新指令
    el.value = binding.value;
  },
  unbind(el) {
    // 销毁指令
    el.removeEventListener('input', (e) => {
      binding.value = e.target.value;
    });
  }
};

Vue.directive('v-model', VModelDirective);

在 vue3.x 中，v-model 指令的实现需要用到 setup 钩子函数。setup 钩子函数在指令第一次绑定到元素时调用，它可以返回一个对象，其中包含指令的初始化逻辑和销毁逻辑。

const VModelDirective = {
  name: 'v-model',
  setup(el, binding) {
    // 初始化指令
    el.value = binding.value;
    el.addEventListener('input', (e) => {
      binding.value = e.target.value;
    });

    // 销毁指令
    return () => {
      el.removeEventListener('input', (e) => {
        binding.value = e.target.value;
      });
    };
  }
};

Vue.directive(VModelDirective);