Vue 3源码极客之：`Vue`的`compiler`如何处理自定义指令的编译和运行时绑定。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

咳咳，各位大佬，晚上好啊！今天咱们来聊聊 Vue 3 源码里一个挺有意思的模块：compiler，特别是它怎么处理自定义指令的编译和运行时绑定。这部分内容，说难也难，说简单也简单，关键在于理解它的思路和流程。准备好了吗？咱们开始！

开场白：自定义指令，Vue 的锦上添花

在 Vue 的世界里，指令（Directives）就像给 HTML 元素打上的标记，让我们可以直接操作 DOM。内置指令，比如 v-if、v-for、v-model 这些，大家肯定用得滚瓜烂熟了。它们已经够强大了，但有时候，我们可能需要更个性化的 DOM 操作，这时候，自定义指令就派上用场了。

自定义指令允许我们定义自己的指令，来完成一些特定场景下的 DOM 操作。比如，你可以做一个 v-focus 指令，自动让 input 元素获得焦点；或者做一个 v-track-click 指令，用来追踪用户的点击行为。

那么问题来了，Vue 的 compiler 模块是怎么把这些自定义指令“翻译”成浏览器能执行的代码，并且在运行时正确地绑定到对应的 DOM 元素上的呢？别急，咱们一步一步揭开它的神秘面纱。

第一幕：编译时，compiler 做了什么？

compiler 的核心任务就是把 Vue 的模板（template）转换成渲染函数（render function）。这个过程可以大致分为三个阶段：

解析 (Parsing): 将模板字符串解析成抽象语法树 (AST)。
转换 (Transforming): 对 AST 进行转换，比如优化静态节点、处理指令等。
生成 (Generating): 将转换后的 AST 生成渲染函数代码。

自定义指令的处理主要发生在转换阶段。

1. 解析：找到指令，标记它！

首先，compiler 会在解析模板的过程中，识别出所有的指令，包括内置指令和自定义指令。识别指令的关键是查找以 v- 或 @ ( v-on 的缩写) 或 : ( v-bind 的缩写) 开头的属性。

例如，对于以下模板：

<div v-highlight="'#f00'" v-track-click="track">Hello</div>

compiler 在解析时，会把 v-highlight 和 v-track-click 识别为指令，并把它们的信息存储在 AST 节点上。具体来说，div 对应的 AST 节点可能会包含这样的信息：

{
  type: 1, // Element 类型
  tag: 'div',
  props: [
    {
      type: 7, // Directive 类型
      name: 'highlight',
      exp: {
        type: 4, // SimpleExpression 类型
        content: "'#f00'",
        isStatic: false
      },
      arg: undefined,
      modifiers: {}
    },
    {
      type: 7, // Directive 类型
      name: 'track-click',
      exp: {
        type: 4, // SimpleExpression 类型
        content: "track",
        isStatic: false
      },
      arg: undefined,
      modifiers: {}
    }
  ],
  children: [...]
}

注意 props 数组里的两个对象，它们的 type 都是 7，表示这是一个指令类型的属性。name 字段存储了指令的名字，exp 字段存储了指令的值（表达式），arg 字段存储了指令的参数 (例如: v-bind:title 中的 title 就是参数)，modifiers 字段存储了指令的修饰符 (例如: v-on:click.prevent 中的 prevent 就是修饰符)。

2. 转换：指令变形记！

解析完成后，compiler 会对 AST 进行转换。转换阶段的一个重要任务就是处理指令。对于自定义指令，compiler 会尝试找到对应的指令定义。

Vue 3 中，指令的定义通常是在组件的 directives 选项中声明的。比如：

const app = Vue.createApp({
  directives: {
    highlight: {
      mounted(el, binding) {
        el.style.backgroundColor = binding.value;
      },
      updated(el, binding) {
        el.style.backgroundColor = binding.value;
      }
    },
    trackClick: {
      mounted(el, binding) {
        el.addEventListener('click', () => {
          binding.value(); // 执行传递的函数
        });
      }
    }
  },
  setup() {
    const track = () => {
      console.log('Clicked!');
    };
    return { track };
  },
  template: `<div v-highlight="'#f00'" v-track-click="track">Hello</div>`
});

在转换阶段，compiler 会根据指令的名字 (highlight 和 track-click)，在组件的 directives 选项中查找对应的指令定义。

如果找到了，compiler 会把指令定义的信息添加到 AST 节点上。这样，在生成渲染函数时，就可以根据这些信息来生成正确的代码。

3. 生成：渲染函数，呼之欲出！

经过解析和转换，compiler 最终会生成渲染函数。渲染函数的作用是根据组件的数据，生成虚拟 DOM (Virtual DOM)。

对于包含自定义指令的节点，渲染函数会包含一些额外的代码，用来在运行时执行指令的钩子函数 (比如 mounted、updated 等)。

例如，对于上面的例子，compiler 可能会生成类似下面的渲染函数代码 (简化版)：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    Vue.openBlock(),
    Vue.createElementBlock(
      'div',
      null,
      'Hello',
      null,
      2,
      [
        [
          Vue.vDirective,
          Vue.resolveDirective('highlight'), // 找到指令定义
          '#f00'
        ],
        [
          Vue.vDirective,
          Vue.resolveDirective('track-click'), // 找到指令定义
          _ctx.track
        ]
      ]
    )
  );
}

注意 Vue.vDirective 这个函数，它就是用来处理指令的核心函数。它会接收指令的名字、值、参数、修饰符等信息，并在运行时执行对应的钩子函数。 Vue.resolveDirective 这个函数负责根据指令名，从组件的 directives 选项中找到对应的指令定义。

第二幕：运行时，指令的舞台！

编译时的工作是为运行时做准备。渲染函数生成后，Vue 会在运行时执行它，生成虚拟 DOM，并最终更新到真实 DOM。

在更新 DOM 的过程中，Vue 会调用 Vue.vDirective 函数，来执行自定义指令的钩子函数。

1. Vue.vDirective 的秘密

Vue.vDirective 函数是一个非常重要的函数。它的作用是根据指令的钩子函数，在合适的时机执行它们。

Vue.vDirective 函数的简化版实现可能如下：

function vDirective(el, binding, vnode, prevVNode) {
  const { instance, dirs } = vnode;
  if (!dirs) return; // 没有指令，直接返回

  for (let i = 0; i < dirs.length; i++) {
    const dir = dirs[i];
    const def = Vue.resolveDirective(dir.name); // 获取指令定义

    if (!def) continue; // 指令未定义，跳过

    const钩子函数参数 = {
      el, // 元素
      binding, // 绑定信息
      vnode, // 虚拟节点
      prevVNode // 上一个虚拟节点
    };

    // 执行指令的钩子函数
    if (def.created) {
      def.created(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
    }
    if (def.beforeMount) {
      def.beforeMount(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
    }

    if (vnode.dirsNeedMount) {
      if (def.mounted) {
        def.mounted(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
      }
    } else if (vnode.dirsNeedUpdate) {
      if (def.beforeUpdate) {
        def.beforeUpdate(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
      }
      if (def.updated) {
        def.updated(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
      }
    }

    if (vnode.dirsNeedUnmount) {
      if (def.beforeUnmount) {
        def.beforeUnmount(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
      }
      if (def.unmounted) {
        def.unmounted(钩子函数参数.el, 钩子函数参数.binding, 钩子函数参数.vnode, 钩子函数参数.prevVNode);
      }
    }
  }
}

这个函数会遍历所有指令，并根据指令的钩子函数，在合适的时机执行它们。

2. 钩子函数的参数

指令的钩子函数接收一些参数，这些参数包含了指令执行所需的信息。

参数名	类型	描述
`el`	Element	指令绑定的元素。
`binding`	Object	一个对象，包含以下 property： `value`：指令绑定的值。例如：`v-my-directive="1 + 1"`，值是 `1 + 1`。 `oldValue`：之前的值，仅在 `beforeUpdate` 和 `updated` 中可用。之前的值只会在值改变的时候可用。 `arg`：传给指令的参数 (如果有的话)。例如：`v-my-directive:foo`，参数是 `"foo"`。 `modifiers`：一个包含修饰符的对象 (如果有的话)。例如：`v-my-directive.foo.bar`，修饰符是 `{ foo: true, bar: true }`。 * `instance`：拥有该指令的组件实例。
`vnode`	VNode	代表绑定元素的 Vue 编译的底层虚拟节点。
`prevVNode`	VNode	前一个虚拟节点，仅在 `beforeUpdate` 和 `updated` 钩子中可用。

3. 指令的生命周期

指令的生命周期和组件的生命周期类似，包含以下钩子函数：

created: 指令第一次绑定到元素且在绑定元素的父组件挂载之前调用。
beforeMount: 在绑定元素的父组件挂载之前调用。
mounted: 在绑定元素的父组件挂载之后调用。
beforeUpdate: 在更新包含指令的组件的 VNode 之前调用。
updated: 在更新包含指令的组件的 VNode 及其子节点的 VNode 之后调用。
beforeUnmount: 在卸载绑定元素的父组件之前调用。
unmounted: 指令与元素解绑时调用。

第三幕：实战演练，代码说话！

光说不练假把式。咱们来写一个简单的自定义指令，加深理解。

例子：v-debounce 指令

这个指令的作用是给元素绑定一个事件，并使用 debounce 函数来限制事件的触发频率。

import { debounce } from 'lodash-es'; // 引入 lodash 的 debounce 函数

const app = Vue.createApp({
  directives: {
    debounce: {
      mounted(el, binding) {
        const delay = binding.arg || 300; // 默认延迟 300ms
        const debouncedFn = debounce(binding.value, delay);
        el.addEventListener('click', debouncedFn);
        el._debouncedFn = debouncedFn; // 保存 debouncedFn，方便 unmounted 时移除
      },
      beforeUnmount(el) {
        el.removeEventListener('click', el._debouncedFn); // 移除事件监听器
      }
    }
  },
  setup() {
    const handleClick = () => {
      console.log('Button clicked!');
    };
    return { handleClick };
  },
  template: `<button v-debounce:500="handleClick">Click me</button>`
});

在这个例子中：

v-debounce:500="handleClick" 表示给 button 元素绑定 debounce 指令，延迟时间为 500ms，触发的函数是 handleClick。
在 mounted 钩子函数中，我们使用 lodash 的 debounce 函数来限制 handleClick 的触发频率。
在 beforeUnmount 钩子函数中，我们移除事件监听器，防止内存泄漏。

总结：compiler 和自定义指令的完美配合

Vue 的 compiler 模块在处理自定义指令时，主要做了以下几件事情：

解析： 识别出模板中的自定义指令，并把它们的信息存储在 AST 节点上。
转换： 找到对应的指令定义，并把它们的信息添加到 AST 节点上。
生成： 生成包含指令执行代码的渲染函数。

在运行时，Vue 会调用 Vue.vDirective 函数，根据指令的钩子函数，在合适的时机执行它们。

通过 compiler 和运行时的配合，Vue 实现了自定义指令的编译和绑定，让我们可以更灵活地操作 DOM，构建更强大的 Vue 应用。

最后：一些小贴士

自定义指令可以访问组件实例，所以可以在指令中调用组件的方法。
自定义指令应该避免直接操作组件的数据，而是应该通过事件来通知组件。
自定义指令应该尽量保持简单，避免包含复杂的逻辑。

好了，今天的讲座就到这里。希望大家对 Vue 3 源码中自定义指令的处理有了更深入的理解。以后再遇到自定义指令的问题，就可以胸有成竹，游刃有余啦！感谢各位大佬的聆听！祝大家编码愉快！

发表回复 取消回复

发表回复取消回复