深入剖析Vue源码 - 选项合并(上)
最新回答
寻鲸录
2026-10-25 18:54:19
对于前端开发者来说，熟练运用 Vue 是基础，但进阶阶段面对复杂场景时，理解 Vue 的设计原则和实现逻辑是关键。此系列文章将带领读者深入 Vue 框架源码，逐步揭开其设计思想，力求用语言解释实现思路，适合那些已掌握 Vue 使用技术的开发者阅读。欢迎提出宝贵意见，以便后续文章持续优化。
使用 Vue 时，初始化数据和合并选项是第一步。在这一过程中，需要传递基础配置，Vue 系统会进行初始化并合并选项。本篇文章将聚焦于 Vue 中如何合并各种数据选项，忽略响应式系统构建过程。
让我们以 Vue 构造器的默认选项为例，深入探讨选项合并的核心。
Vue 构造函数自带四个默认配置选项：component、directive、filter 和 _base。这些选项被挂载到构造函数的 options 属性上。
在初始化方法中，核心代码段负责合并用户提供的 options 与 Vue 构造函数自身的选项配置，并将合并结果挂载到实例对象的 $options 属性上。
选项校验是合并过程中的关键环节，旨在确保用户传递的配置符合规范。此步骤包括对 components、prop、inject 和 directive 等选项的严格检查。
让我们以 components 规范检验为例，说明在选项合并前需要检查的命名规范，例如组件名不能使用 HTML 保留标签，只能以字母开头。
在 props 规范检验中，选项形式包括数组和带有校验规则的对象。无论是哪种形式，最终都转换为对象格式。
在 props 规范检验过程中，发现了一段优化代码，用于缓存函数执行结果，避免重复计算，提升前端性能。这属于典型的偏函数应用，相关详细内容请参考另一篇文章《打造属于自己的 underscore 系列（五）- 偏函数和函数柯里化》。
在选项校验后，合并策略成为关键点。合并策略分为三类：Vue 自定义策略、父类自身配置和子类自身策略（用户配置）。合并策略的难点在于处理选项的多样性，包括数据、元素等。
Vue 源码中，处理这三个选项的方法是：首先应用默认的自定义策略合并子与父配置项，其次在不存在自定义策略时，优先选择子类配置选项，否则使用父类配置。
欢迎关注公众号 **假前端**
热门标签
