Vue 3源码深度解析之：`Vue`的自定义指令：`directive`的生命周期与底层实现。

嘿，大家好！今天咱们来聊聊 Vue 3 里面那些神奇的小精灵——自定义指令(directive)。别怕，听起来高大上，其实原理简单着呢。咱们不搞那些虚头巴脑的理论，直接撸代码，把这玩意儿扒个精光。

开场白：指令是啥？为啥要自定义？

简单来说，Vue 的指令就像 HTML 元素的“超能力”。像 v-if、v-for 都是内置指令，它们能让我们的 HTML 元素乖乖听话，根据数据变化做出各种反应。

但是！内置指令毕竟有限，总有些时候，我们需要更个性化的能力。比如，想让某个元素自动获得焦点，或者想实现一个神奇的颜色渐变效果，这时候，自定义指令就派上大用场啦！

第一部分：指令的生命周期：从出生到消亡

自定义指令也有自己的“一生”，从创建、插入到更新、卸载，每个阶段都有特定的钩子函数可以让我们介入。这些钩子函数就是指令的“生命周期”。

钩子函数	触发时机	作用
created	指令绑定元素的 attribute 或属性被应用之前调用。	可以在这里进行一些初始化的设置，例如读取指令绑定的参数。但此时元素还未插入 DOM，所以无法进行 DOM 操作。
beforeMount	指令第一次绑定到元素并且在挂载之前调用。	这个钩子函数可以访问到元素，但是元素还没有插入到 DOM 中。可以在这里进行一些准备工作，例如设置元素的初始样式。
mounted	绑定元素的父组件挂载完成后调用。	元素已经插入 DOM，可以进行 DOM 操作。这是最常用的钩子函数，通常在这里进行一些与 DOM 相关的操作，例如事件监听、样式修改等。
beforeUpdate	在包含组件的 VNode 更新之前调用。	可以在这里获取到更新前后的数据，进行一些比较或者清理工作。
updated	在包含组件的 VNode 及其子组件的 VNode 更新之后调用。	元素已经更新，可以进行 DOM 操作。
beforeUnmount	在绑定元素的父组件卸载之前调用。	可以在这里进行一些清理工作，例如移除事件监听、取消定时器等。
unmounted	指令与元素解绑时调用。	元素已经从 DOM 中移除，无法进行 DOM 操作。

代码示例：一个简单的焦点指令

咱们先来写一个简单的自定义指令，让元素在插入 DOM 后自动获得焦点。

const focusDirective = {
  mounted(el) {
    el.focus();
  },
};

const app = Vue.createApp({
  components: {
    MyComponent: {
      template: `
        <input type="text" v-focus />
      `,
      directives: {
        focus: focusDirective,
      },
    },
  },
  template: `
    <MyComponent />
  `,
});

app.directive('focus', focusDirective); // 全局注册
app.mount('#app');

这段代码很简单：

1. 我们定义了一个名为 focusDirective 的对象，它包含 mounted 钩子函数。
2. 在 mounted 钩子函数中，我们调用 el.focus()，让元素获得焦点。
3. 我们在 MyComponent 组件中局部注册了这个指令，也可以通过app.directive('focus', focusDirective)全局注册，然后在 template 中使用 v-focus 指令。

第二部分：指令的参数：传递数据的小秘密

自定义指令不仅能“干活”，还能接收参数，让指令的行为更加灵活。我们可以通过以下方式传递参数：

• 值 (value): v-my-directive="someValue"
• 参数 (argument): v-my-directive:argument="someValue"
• 修饰符 (modifiers): v-my-directive.modifier1.modifier2="someValue"

• 绑定到指令上的属性 (binding): 一个包含以下属性的对象：

  • instance: 使用该指令的组件实例。
  • value: 传递给指令的值。例如：v-my-directive="1 + 1"，值是 2。
  • oldValue: 先前的值，仅在 beforeUpdate 和 updated 中可用。如果没有改变则两个值相同。
  • arg: 传递给指令的参数 (如果有的话)。例如：v-my-directive:foo，参数是 "foo"。
  • modifiers: 一个包含修饰符的对象 (如果有的话)。例如：v-my-directive.foo.bar，修饰符是 { foo: true, bar: true }。
  • dir: 指令的定义对象。

代码示例：带参数的颜色指令

const colorDirective = {
  mounted(el, binding) {
    el.style.backgroundColor = binding.value;
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value;
  },
};

const app = Vue.createApp({
  data() {
    return {
      color: 'red',
    };
  },
  template: `
    <div v-color="color">Hello, Directive!</div>
    <button @click="color = 'blue'">Change Color</button>
  `,
  directives: {
    color: colorDirective,
  },
});

app.mount('#app');

在这个例子中：

1. 我们定义了一个 colorDirective，它接收一个值作为背景颜色。
2. 在 mounted 和 updated 钩子函数中，我们通过 binding.value 获取传递的值，并设置元素的 backgroundColor。
3. 我们在模板中使用 v-color="color"，将 color 数据绑定到指令上。点击按钮后，颜色会改变。

代码示例：带参数和修饰符的指令

const highlightDirective = {
  mounted(el, binding) {
    const color = binding.value || 'yellow';
    const fontWeight = binding.modifiers.bold ? 'bold' : 'normal';

    el.style.backgroundColor = color;
    el.style.fontWeight = fontWeight;
  },
  updated(el, binding) {
    const color = binding.value || 'yellow';
    const fontWeight = binding.modifiers.bold ? 'bold' : 'normal';

    el.style.backgroundColor = color;
    el.style.fontWeight = fontWeight;
  },
};

const app = Vue.createApp({
  data() {
    return {
      highlightColor: 'lightgreen',
    };
  },
  template: `
    <p v-highlight:text.bold="highlightColor">This is some highlighted text.</p>
    <p v-highlight.bold>This is another highlighted text.</p>
  `,
  directives: {
    highlight: highlightDirective,
  },
});

app.mount('#app');

这个例子展示了参数和修饰符的用法：

1. binding.value 获取传递的值，如果没有传递值，则默认使用 ‘yellow’。
2. binding.modifiers.bold 检查是否使用了 bold 修饰符。
3. 在模板中，我们使用了 v-highlight:text.bold="highlightColor" 和 v-highlight.bold，传递了参数 text 和修饰符 bold。

第三部分：底层实现：Vue 怎么处理指令？

想知道 Vue 内部怎么处理指令吗？咱们来扒一扒源码（简化版）。

Vue 在编译模板时，会扫描所有指令，并将它们转换成 VNode 的属性。当 VNode 被渲染时，Vue 会调用指令的钩子函数。

简单来说，Vue 内部维护了一个指令注册表，存储了所有已注册的指令。当遇到指令时，Vue 会从注册表中查找对应的指令，并执行相应的钩子函数。

简化版源码示例 (仅用于理解原理):

// 指令注册表
const directiveRegistry = {};

// 注册指令
function registerDirective(name, directive) {
  directiveRegistry[name] = directive;
}

// 应用指令
function applyDirective(el, vnode) {
  const directives = vnode.directives; // 从 VNode 中获取指令
  if (!directives) return;

  directives.forEach((directive) => {
    const directiveDef = directiveRegistry[directive.name]; // 从注册表中查找指令
    if (directiveDef && directiveDef.mounted) {
      directiveDef.mounted(el, directive.binding, vnode); // 调用 mounted 钩子函数
    }
  });
}

// 模拟 VNode
const vnode = {
  tag: 'div',
  props: {
    id: 'my-div',
  },
  directives: [
    {
      name: 'my-directive',
      binding: {
        value: 'someValue',
      },
    },
  ],
};

// 模拟指令定义
const myDirective = {
  mounted(el, binding) {
    console.log('Directive mounted!', el, binding);
  },
};

// 注册指令
registerDirective('my-directive', myDirective);

// 模拟元素
const el = document.createElement('div');
el.id = 'my-div';

// 应用指令
applyDirective(el, vnode); // 输出 "Directive mounted!"

这段代码只是一个简化的例子，展示了 Vue 如何注册和应用指令。真正的 Vue 源码要复杂得多，但核心思想是相同的：

1. 注册指令到注册表。
2. 在编译模板时，将指令信息添加到 VNode 中。
3. 在渲染 VNode 时，从注册表中查找指令，并调用相应的钩子函数。

第四部分：实战案例：一个防抖指令

光说不练假把式，咱们来写一个实用的防抖指令。防抖可以防止函数在短时间内被多次调用，常用于处理用户输入事件。

const debounceDirective = {
  mounted(el, binding) {
    let timer = null;
    const delay = binding.arg || 300; // 默认延迟 300ms

    el.addEventListener('input', (event) => {
      if (timer) {
        clearTimeout(timer);
      }

      timer = setTimeout(() => {
        binding.value(event); // 调用传递的函数
        timer = null;
      }, delay);
    });
  },
  unmounted(el) {
    el.removeEventListener('input', () => {});
  },
};

const app = Vue.createApp({
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleInput(event) {
      this.message = event.target.value;
      console.log('Input:', this.message);
    },
  },
  template: `
    <input type="text" v-debounce:500="handleInput" />
    <p>Message: {{ message }}</p>
  `,
  directives: {
    debounce: debounceDirective,
  },
});

app.mount('#app');

在这个例子中：

1. 我们定义了一个 debounceDirective，它接收一个函数作为参数，并使用防抖技术来调用该函数。
2. binding.arg 允许我们自定义延迟时间，如果没有传递参数，则默认延迟 300ms。
3. 在 mounted 钩子函数中，我们监听元素的 input 事件，并使用 setTimeout 来实现防抖。
4. 在 unmounted 钩子函数中，我们移除事件监听，防止内存泄漏。
5. 在模板中使用 v-debounce:500="handleInput"，将 handleInput 函数绑定到指令上，并设置延迟时间为 500ms。

总结：指令的魅力

自定义指令是 Vue 中一个非常强大的特性，它可以让我们扩展 HTML 元素的能力，实现各种自定义的行为。掌握自定义指令，可以让我们编写更加灵活、可复用的 Vue 组件。

记住，指令的生命周期、参数传递和底层实现是理解自定义指令的关键。多写、多练，你也能成为指令大师！

好了，今天的分享就到这里。希望大家有所收获！下次有机会，咱们再聊聊 Vue 的其他有趣特性。 拜拜！