技术博文：剖析 Vue.js 源码——initData 函数揭秘

2023-09-07 04:17:20

在 Vue.js 的生命周期中，initData 函数扮演着至关重要的角色，负责对组件数据进行初始化。本文将深入分析 initData 函数的源代码，揭开其背后的工作原理。

`initData` 函数简介

initData 函数位于 src/core/instance/init.js 文件中，是 Vue 组件实例化过程中调用的第一个函数。它的主要职责是初始化组件数据，并建立数据和视图之间的双向绑定。

`initData` 函数源代码分析

initData (data) {
  let keys = this._props
    ? Reflect.ownKeys(data).filter(key => key !== '$props')
    : Reflect.ownKeys(data)
  const props = this._props
  const methods = this.$options.methods
  for (let i = 0; i < keys.length; i++) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production' && methods && hasOwn(methods, key)) {
      console.warn(
        `Method "${key}" has already been defined as a data property.`
      )
    }
    observe(data, key, undefined, this)
    proxy(target, key, val)
  }
}

核心工作流程

获取 data 的属性键数组： 首先，initData 函数获取 data 对象的所有属性键，并存储在 keys 数组中。
过滤掉 $props 属性： 如果组件定义了 props 选项，则会从 keys 数组中过滤掉 $props 属性，因为 $props 是一个特殊的属性，表示组件的 props 对象。
检查与方法的冲突： 如果启用了开发模式（process.env.NODE_ENV !== 'production'），则会检查 data 中的属性键是否与组件定义的方法同名。如果存在冲突，会在控制台中发出警告。
对数据进行响应式处理： 使用 observe 函数对每个属性键进行响应式处理，这意味着当数据发生变化时，视图将自动更新。
代理数据属性： 使用 proxy 函数为每个属性键创建代理，这意味着可以通过组件实例直接访问数据属性，而无需访问 this._data 对象。