Vue.js 3.0 源码剖析：Props 初始化与更新背后的秘密

前端

2024-02-14 01:52:16

前言

Vue.js，作为当今最流行的前端框架之一，以其响应式系统和优雅的语法而著称。在 Vue.js 3.0 中，对 Props 的处理方式进行了重大改进，使 Props 的初始化和更新更加高效且直观。

本文将通过剖析 Vue.js 3.0 的源码，深入探究 Props 的初始化和更新流程，揭示其背后的秘密，从而帮助开发者更好地理解和掌握 Vue.js 的特性。

Props 初始化

Props 的初始化过程始于组件实例创建。当组件实例被创建时，它会遍历组件定义的 Props 属性，并根据以下规则对其进行初始化：

直接赋值： 如果 Prop 被明确指定了一个值，则该值将直接赋值给 Prop。
默认值： 如果 Prop 没有被指定值，则使用其默认值（如果已定义）。
父组件传递： 如果 Prop 是从父组件传递的，则使用父组件提供的对应值。

在初始化过程中，Vue.js 会创建一个 Props 代理对象，它将 Props 的值代理到组件实例上。这样，开发者就可以在组件模板中访问 Props 的值，就像它们是组件自身的数据一样。

Props 更新

当 Props 的值发生变化时，Vue.js 会触发 Props 更新流程。更新流程遵循以下步骤：

检测变化： Vue.js 会使用深度比较算法检测 Props 的新旧值是否发生变化。
触发 Props 更新钩子： 如果 Props 的值确实发生变化，Vue.js 会触发 beforeUpdate 和 updated 钩子。
更新 Props 代理： Vue.js 会更新 Props 代理对象，以反映 Props 的新值。
触发 watch 侦听器： 如果对 Props 的更改被任何 watch 侦听器侦听，则这些侦听器将被触发。
更新组件实例： Vue.js 会更新组件实例，使其反映 Props 的新值。

源码剖析

以下是 Vue.js 3.0 中与 Props 初始化和更新相关的部分源码：

// Props 初始化
export function initProps(vm: ComponentInternalInstance, rawProps: any, instanceOptions?: ComponentOptions) {
  const props = {}
  const attrs = {}
  // ...
}

// Props 更新
export function updateProps(instance: ComponentInternalInstance, rawProps: any, rawPrevProps: any, optimized?: boolean) {
  // ...
}