面试题：请手写一个自定义指令，并描述如何调用它？

在 Vue 中，自定义指令是一种强大的功能，允许开发者直接操作 DOM 元素。以下是如何手写一个自定义指令，并描述如何调用它的详细步骤。

---

1. 自定义指令的基本结构

Vue 提供了 directive 方法来注册自定义指令。一个自定义指令可以包含以下几个钩子函数：

• bind：指令第一次绑定到元素时调用。
• inserted：被绑定元素插入父节点时调用。
• update：组件更新时调用（但可能发生在子组件更新之前）。
• componentUpdated：组件及其子组件全部更新后调用。
• unbind：指令与元素解绑时调用。

在 Vue 3 中，钩子函数的名称有所变化：

• beforeMount：对应 Vue 2 的 bind。
• mounted：对应 Vue 2 的 inserted。
• beforeUpdate：对应 Vue 2 的 update。
• updated：对应 Vue 2 的 componentUpdated。
• beforeUnmount：对应 Vue 2 的 unbind。

---

2. 手写一个自定义指令

以下是一个简单的自定义指令示例：v-focus，用于在元素插入 DOM 后自动聚焦。

Vue 2 实现

// 全局注册自定义指令
Vue.directive('focus', {
  // 当绑定元素插入 DOM 时调用
  inserted(el) {
    el.focus(); // 聚焦元素
  },
});

// 在组件中使用
new Vue({
  el: '#app',
  template: `
    <div>
      <input v-focus placeholder="自动聚焦">
    </div>
  `,
});

Vue 3 实现

import { createApp } from 'vue';

const app = createApp({});

// 全局注册自定义指令
app.directive('focus', {
  // 当绑定元素插入 DOM 时调用
  mounted(el) {
    el.focus(); // 聚焦元素
  },
});

// 在组件中使用
app.mount('#app');

---

3. 自定义指令的参数

自定义指令可以接收以下参数：

• el：指令绑定的元素。
• binding：一个对象，包含以下属性：
  • value：指令的绑定值（例如 v-focus="value" 中的 value）。
  • oldValue：指令绑定的前一个值（仅在 update 和 componentUpdated 中可用）。
  • arg：指令的参数（例如 v-focus:arg 中的 arg）。
  • modifiers：一个包含修饰符的对象（例如 v-focus.modifier 中的 modifier）。

---

4. 带参数的自定义指令示例

以下是一个带参数的自定义指令示例：v-color，用于动态设置元素的背景颜色。

Vue 2 实现

Vue.directive('color', {
  bind(el, binding) {
    el.style.backgroundColor = binding.value; // 设置背景颜色
  },
  update(el, binding) {
    el.style.backgroundColor = binding.value; // 更新背景颜色
  },
});

new Vue({
  el: '#app',
  data() {
    return {
      color: 'yellow',
    };
  },
  template: `
    <div>
      <div v-color="color" style="width: 100px; height: 100px;"></div>
      <button @click="color = 'red'">红色</button>
      <button @click="color = 'green'">绿色</button>
    </div>
  `,
});

Vue 3 实现

import { createApp, ref } from 'vue';

const app = createApp({
  setup() {
    const color = ref('yellow');
    return {
      color,
    };
  },
});

app.directive('color', {
  beforeMount(el, binding) {
    el.style.backgroundColor = binding.value; // 设置背景颜色
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value; // 更新背景颜色
  },
});

app.mount('#app');

---

5. 局部注册自定义指令

除了全局注册，还可以在组件中局部注册自定义指令。

Vue 2 实现

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};

Vue 3 实现

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      },
    },
  },
};

---

6. 调用自定义指令

在模板中通过 v-指令名 的方式调用自定义指令。例如：

<input v-focus placeholder="自动聚焦">
<div v-color="color"></div>

---

总结

• 自定义指令：通过 directive 方法注册，可以操作 DOM 元素。
• 钩子函数：bind/beforeMount、inserted/mounted、update/beforeUpdate、componentUpdated/updated、unbind/beforeUnmount。
• 参数：el、binding（value、oldValue、arg、modifiers）。
• 调用方式：在模板中使用 v-指令名。

通过自定义指令，可以实现更灵活的 DOM 操作和功能扩展。