3.5 Vue.js 是各个模块组成的有机整体

Vue.js 的各模块不是孤立的：组件依赖渲染器，模板依赖编译器，而编译器与渲染器通过虚拟 DOM 交换信息。

一、模块之间的依赖关系

编译产物必须配合渲染器的实现，两者是「一体化设计」，不能各自单独演进。

二、编译器与渲染器的信息交流

编译器能识别哪些是静态属性、哪些是动态属性，生成代码时可以把这些信息一并带上，供渲染器在更新时直接使用。

<div id="foo" :class="cls"></div>

编译后：

export default {
  render() {
    return {
      tag: 'div',
      props: {
        id: 'foo',   // 静态属性，永不变
        class: cls   // 动态属性
      },
      patchFlags: 1  // 假设数字 1 代表 class 是动态的
    }
  }
}

渲染器拿到 patchFlags 后就知道「只需要更新 class」，无需再遍历全部属性。

虚拟 DOM 对象就是编译器与渲染器交流的媒介；这种配合是 Vue.js 3 性能进一步提升的关键手段之一。

相关

• 3.4 模板的工作原理：模板如何被编译器变成渲染函数