Vue3 的 SFC 编译优化之动态属性提升与静态属性合并原理

描述
动态属性提升与静态属性合并是 Vue3 单文件组件编译优化的关键技术之一，主要用于优化 VNode 的创建过程。传统虚拟 DOM 在每次渲染时，无论属性是否变化，都需要为每个元素创建一个完整的属性对象。这个优化通过分离静态和动态属性，对静态部分进行提升和共享，从而减少重复的 VNode 属性创建开销，提升渲染性能。

解题过程

1. 问题分析
假设我们有以下模板：

<div id="container" class="main-content" :style="dynamicStyle" @click="handleClick">
  {{ message }}
</div>

每次渲染时，Vue 需要为这个 div 创建属性对象：

const vnode = h('div', {
  id: 'container',
  class: 'main-content',
  style: dynamicStyle,  // 动态
  onClick: handleClick  // 动态
}, message)

问题：

• id 和 class 是静态的，但每次渲染都要重新创建
• 多个相同元素需要重复创建相同的静态属性对象
• 属性对象的创建和比对开销较大

2. 优化思路
核心思路是将静态属性与动态属性分离：

• 静态属性提升：提取静态属性到渲染函数外部，避免每次渲染重新创建
• 静态属性合并：将多个静态属性合并到一个共享对象中
• 运行时只传递动态属性，通过原型链或合并方式与静态属性结合

3. 编译过程详解

步骤1：模板解析与转换
编译器首先解析模板，识别静态和动态属性：

// 原始AST节点
{
  type: 1, // 元素节点
  tag: 'div',
  props: [
    { name: 'id', value: 'container' },        // 静态
    { name: 'class', value: 'main-content' },  // 静态
    { name: 'style', value: dynamicStyle },    // 动态
    { name: 'onClick', value: handleClick }    // 动态
  ]
}

步骤2：属性分离处理
编译器将属性分为三类：

// 静态属性
const staticProps = {
  id: 'container',
  class: 'main-content'
}

// 动态属性键名
const dynamicPropNames = ['style', 'onClick']

// 运行时只需要处理动态属性

步骤3：生成优化后的渲染函数
优化前的渲染函数：

function render() {
  return h('div', {
    id: 'container',
    class: 'main-content',
    style: dynamicStyle,
    onClick: handleClick
  }, message)
}

优化后的渲染函数：

// 静态属性提升到外部
const hoistedStaticProps = {
  id: 'container',
  class: 'main-content'
}

function render() {
  return h('div', {
    ...hoistedStaticProps,  // 静态属性
    style: dynamicStyle,    // 动态属性
    onClick: handleClick
  }, message)
}

步骤4：进一步优化 - PatchFlag 结合
结合 PatchFlag 进行靶向更新：

// 编译结果
const _hoisted_1 = { id: 'container', class: 'main-content' }

function render(_ctx, _cache) {
  return (_openBlock(), _createBlock('div', {
    ..._hoisted_1,
    style: _ctx.dynamicStyle,
    onClick: _ctx.handleClick
  }, [_toDisplayString(_ctx.message)], 16 /* FULL_PROPS */))
}

• _hoisted_1：提升的静态属性对象
• 16 (FULL_PROPS)：表示有动态属性，需要全量对比属性

步骤5：静态属性合并
当多个元素有相同静态属性时，会进行合并共享：

<div class="container" id="app">
  <div class="container" id="header"></div>
  <div class="container" id="content"></div>
</div>

编译后：

// 共享的静态属性
const _hoisted_1 = { class: 'container' }

function render() {
  return (_openBlock(),
    _createBlock('div', { id: 'app', ..._hoisted_1 }, [
      _createVNode('div', { id: 'header', ..._hoisted_1 }),
      _createVNode('div', { id: 'content', ..._hoisted_1 })
    ])
  )
}

4. 运行时处理机制

4.1 属性合并策略
Vue 使用 normalizeProps 函数处理属性合并：

function normalizeProps(props) {
  if (!props) return null
  
  // 如果已经有静态属性对象
  if (props.staticProps) {
    return Object.assign({}, props.staticProps, props.dynamicProps)
  }
  return props
}

4.2 与 PatchFlag 协同工作

• 只有动态属性时：使用对应的 PatchFlag
• 有动态和静态属性时：使用 FULL_PROPS
• 运行时根据 PatchFlag 决定属性比对策略

4.3 内存优化
通过共享静态属性对象：

• 减少内存占用
• 提高属性比对速度
• 利于 JavaScript 引擎优化

5. 性能收益分析

5.1 内存收益
假设有 1000 个相同元素：

• 优化前：1000 个独立的属性对象
• 优化后：1 个共享的静态属性对象 + 1000 个动态属性对象
• 内存节省：1000 * 静态属性大小 - 共享对象大小

5.2 创建速度收益

• 避免重复创建静态属性对象
• 减少垃圾回收压力
• 提高 VNode 创建速度 20%-30%

6. 边界情况处理

6.1 属性覆盖问题
静态属性可能被动态属性覆盖：

// 编译器会检测并警告
<div id="static" :id="dynamicId"></div>

6.2 条件渲染中的静态属性

<div v-if="show" class="container">
<div v-else class="container">  <!-- 相同的静态属性 -->

编译器会识别并合并相同的静态属性。

6.3 组件上的静态属性
组件的静态属性会被传递到根元素：

<MyComponent class="static-class" />
// 会被编译为将 class 合并到组件根元素

总结
动态属性提升与静态属性合并通过编译时分析，将静态属性提取、合并、提升，运行时通过共享对象减少重复创建，结合 PatchFlag 实现靶向更新。这种优化在大量重复元素场景下性能提升明显，是 Vue3 编译优化的基础技术之一，与其他优化技术协同工作，共同构建了 Vue3 的高性能渲染体系。