剖析 Vue 3 编译器如何处理 “ 中的动态属性和事件，并将其转换为渲染函数中的 VNode props。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，今天咱们来聊聊 Vue 3 编译器里的魔法，看看它怎么把 <template> 里那些花里胡哨的动态属性和事件，“biu” 一下变成渲染函数里的 VNode props。保证让你听完之后，感觉自己也能手搓一个 Vue 3！

开场白：<template> 背后的秘密

平时我们写 Vue 组件，大部分时间都在跟 <template> 打交道。但是，浏览器可不认识这玩意儿，它只认 JavaScript。所以，<template> 里的东西必须经过编译，变成 JavaScript 代码，才能最终渲染到页面上。

Vue 3 的编译器就像一个翻译官，它把 <template> 里的 HTML 结构、指令、动态属性、事件等等，翻译成渲染函数。而渲染函数，说白了，就是一个用 JavaScript 代码生成 VNode (Virtual DOM Node) 的函数。

VNode 呢，就是 Vue 用来描述页面结构的一种数据结构。它包含了元素类型、属性、子节点等等信息。最终，Vue 会把 VNode 树渲染成真正的 DOM 树。

今天，咱们重点聊聊编译器怎么处理 <template> 里的动态属性和事件，并把它们变成 VNode props。

第一幕：动态属性的处理

动态属性，顾名思义，就是属性的值不是固定的，而是根据某些表达式计算出来的。比如：

<template>
  <div :class="isActive ? 'active' : 'inactive'" :style="{ color: textColor }">
    Hello Vue!
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

这里，class 和 style 都是动态属性。class 的值根据 isActive 的值动态变化，style 的值根据 textColor 的值动态变化。

编译器看到 :class 和 :style，会怎么处理呢？

指令的识别： 编译器首先会识别出 : 是 v-bind 指令的简写。v-bind 指令的作用就是动态绑定属性。
表达式的解析： 编译器会解析指令后面的表达式，比如 isActive ? 'active' : 'inactive' 和 { color: textColor }。
生成 VNode props： 编译器会把解析出来的表达式，转换成 VNode props 对象里的属性。

最终，上面的 <template> 会被编译成类似下面的渲染函数：

import { createElementVNode, toDisplayString, normalizeClass, normalizeStyle } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (createElementVNode("div", {
    class: normalizeClass(_ctx.isActive ? 'active' : 'inactive'),
    style: normalizeStyle({ color: _ctx.textColor })
  }, "Hello Vue!"));
}

这里，createElementVNode 函数就是用来创建 VNode 的。它的第一个参数是元素类型 (div)，第二个参数是 props 对象，第三个参数是子节点。

注意 class 和 style 属性的值。编译器使用了 normalizeClass 和 normalizeStyle 函数来处理它们。这两个函数的作用是：

normalizeClass：把各种类型的 class 值 (字符串、数组、对象) 转换成统一的字符串格式。
normalizeStyle：把各种类型的 style 值 (字符串、数组、对象) 转换成统一的对象格式。

重点来了！ 编译器并没有直接把 isActive ? 'active' : 'inactive' 和 { color: textColor } 放到 VNode props 里。而是使用了 normalizeClass 和 normalizeStyle 函数进行处理。这是因为 Vue 需要对 class 和 style 进行一些特殊处理，比如合并 class、处理 CSS 前缀等等。

第二幕：事件的处理

事件的处理和属性的处理类似。比如：

<template>
  <button @click="handleClick">Click me!</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Clicked!');
    }
  }
}
</script>

这里，@click 是 v-on 指令的简写。v-on 指令的作用是监听 DOM 事件，并在事件发生时执行相应的回调函数。

编译器看到 @click，会怎么处理呢？

指令的识别： 编译器首先会识别出 @ 是 v-on 指令的简写。
表达式的解析： 编译器会解析指令后面的表达式，比如 handleClick。
生成 VNode props： 编译器会把解析出来的表达式，转换成 VNode props 对象里的 on 开头的属性。

最终，上面的 <template> 会被编译成类似下面的渲染函数：

import { createElementVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (createElementVNode("button", {
    onClick: _ctx.handleClick
  }, "Click me!"));
}

注意 onClick 属性的值。编译器直接把 _ctx.handleClick (也就是组件实例上的 handleClick 方法) 赋值给了 onClick 属性。

再来个复杂点的例子：事件修饰符

Vue 提供了很多事件修饰符，比如 .stop、.prevent、.capture 等等。这些修饰符可以用来控制事件的行为。比如：

<template>
  <a @click.stop="handleClick" href="#">Click me!</a>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('Clicked!');
    }
  }
}
</script>

这里，.stop 修饰符的作用是阻止事件冒泡。

编译器看到 @click.stop，会怎么处理呢？

编译器会生成一个包装函数，在这个函数里调用 event.stopPropagation() 来阻止事件冒泡，然后再调用 handleClick 方法。

最终，上面的 <template> 会被编译成类似下面的渲染函数：

import { createElementVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (createElementVNode("a", {
    onClick: /*#__PURE__*/_cache[0] || (_cache[0] = (...args) => (_ctx.handleClick(...args), event.stopPropagation()))
  }, "Click me!"));
}

可以看到，onClick 属性的值是一个箭头函数。这个箭头函数先调用 _ctx.handleClick 方法，然后再调用 event.stopPropagation() 方法。

第三幕：指令的处理

除了 v-bind 和 v-on，Vue 还提供了很多其他的指令，比如 v-if、v-for、v-model 等等。这些指令的处理方式比较复杂，涉及到代码的生成、依赖的收集等等。

咱们这里简单介绍一下 v-if 的处理方式。比如：

<template>
  <div v-if="isVisible">Hello Vue!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    }
  }
}
</script>

编译器看到 v-if，会怎么处理呢？

编译器会生成一个条件渲染的 VNode。如果 isVisible 的值为 true，就渲染 div 元素；否则，就不渲染任何东西。

最终，上面的 <template> 会被编译成类似下面的渲染函数：

import { createElementVNode, toDisplayString, createCommentVNode } from 'vue';

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_ctx.isVisible)
    ? (createElementVNode("div", null, "Hello Vue!"))
    : (createCommentVNode("v-if", true))
}

这里，createCommentVNode("v-if", true) 函数用来创建一个注释节点，表示 v-if 指令不渲染任何东西。

总结：VNode props 的秘密花园

通过上面的例子，我们可以看到，编译器会把 <template> 里的动态属性、事件、指令等等，转换成 VNode props 对象里的属性。这个 props 对象就像一个秘密花园，里面包含了各种各样的信息，用来描述 VNode 的行为和外观。

为了更清楚地了解 VNode props 的结构，咱们可以把它整理成一个表格：

属性名	含义	示例
class	元素的 class 属性。可以是字符串、数组、对象，会被 `normalizeClass` 函数处理。	`normalizeClass('active')`、`normalizeClass(['active', 'disabled'])`、`normalizeClass({ active: true, disabled: false })`
style	元素的 style 属性。可以是字符串、数组、对象，会被 `normalizeStyle` 函数处理。	`normalizeStyle('color: red')`、`normalizeStyle(['color: red', 'font-size: 16px'])`、`normalizeStyle({ color: 'red', fontSize: '16px' })`
onXXX	元素的事件监听器。XXX 是事件名，比如 click、mouseover 等等。值是一个函数，会在事件发生时被调用。	`onClick: _ctx.handleClick`、`onMouseover: _ctx.handleMouseover`
其他属性	元素的其他属性。比如 id、title、href 等等。	`id: 'my-div'`、`title: 'My Div'`、`href: 'https://www.example.com'`
指令相关属性	一些指令会生成特殊的属性，用来控制 VNode 的行为。比如 `v-model` 会生成 `modelValue` 和 `onUpdate:modelValue` 属性。	`modelValue: _ctx.inputValue`、`onUpdate:modelValue: ($event) => (_ctx.inputValue = $event)`

总结与展望

今天，咱们一起探索了 Vue 3 编译器如何处理 <template> 里的动态属性和事件，并把它们转换成渲染函数里的 VNode props。希望通过今天的学习，你对 Vue 3 的编译原理有了更深入的了解。

当然，Vue 3 编译器的实现非常复杂，这里只是冰山一角。如果你想更深入地了解，可以阅读 Vue 3 的源码。

最后，希望大家都能成为 Vue 3 大佬，手搓框架，指日可待！咱们下次再见！

发表回复 取消回复

发表回复取消回复