Vue源码学习之初始化模块init.js解析

针对“Vue源码学习之初始化模块init.js解析”的完整攻略，我将从以下几个方面进行详细讲解。

标题

本文将重点讲解Vue源码中的init.js文件，即Vue实例的初始化模块，其中包含了Vue实例在创建过程中的各种初始化操作。

代码示例

首先，让我们来看一下init.js中的代码示例：

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

这段代码主要是Vue实例初始化的入口，其中包含了初始化props、methods、data、computed和watch等操作。下面我们将对这些操作进行详细讲解。

初始化props

在init.js中，通过initProps方法来初始化props：

function initProps (vm: Component, propsOptions: Object) {
  const propsData = vm.$options.propsData || {}
  const props = vm._props = {}
  // cache prop keys so that future props updates can iterate using Array
  // instead of dynamic object key enumeration.
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  observerState.shouldConvert = isRoot
  for (const key in propsOptions) {
    keys.push(key)
    const value = validateProp(key, propsOptions, propsData, vm)
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      const hyphenatedKey = hyphenate(key)
      if (isReservedAttribute(hyphenatedKey) ||
          config.isReservedAttr(hyphenatedKey)) {
        warn(
          `"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
          vm
        )
      }
      defineReactive(props, key, value, () => {
        if (!isRoot && !isUpdatingChildComponent) {
          warn(
            `Avoid mutating a prop directly since the value will be ` +
            `overwritten whenever the parent component re-renders. ` +
            `Instead, use a data or computed property based on the prop's ` +
            `value. Prop being mutated: "${key}"`,
            vm
          )
        }
      })
    } else {
      defineReactive(props, key, value)
    }
    // static props are already proxied on the component's prototype
    // during Vue.extend(). We only need to proxy props defined at
    // instantiation here.
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  observerState.shouldConvert = true
}

在这段代码中，通过for循环遍历propsOptions，调用validateProp方法来验证prop值的正确性，并使用defineReactive方法将vm._props对象中的每个prop属性变成响应式的。

初始化data

接着，在initData方法中，初始化data：

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

在这段代码中，Vue通过getData方法获取data的值，并使用defineReactive方法将其变成响应式的。而后，再通过Object.keys(data)来遍历data，对其中的每个key值使用proxy方法，将其代理到vm实例上。最后，Vue调用observe方法来将整个data对象变为响应式的。

其他初始化操作

除了上述的props和data，还有methods、computed和watch等数据也都会通过Vue的init.js文件进行初始化。这些操作的实现原理跟上述两个类似，都需要使用Vue的一些核心方法来对相关数据进行响应式处理。

示例说明

为了让大家更好地理解以上内容，我将结合两个示例来进行说明：

props示例

假设我们有这么一个Vue组件：

<template>
  <div>{{name}}</div>
</template>

<script>
  export default {
    name: 'child-component',
    props: ['name']
  }
</script>

这里组件定义了一个props属性name，我们可以在父组件中传入相应的值：

<child-component :name="'Tom'"></child-component>

通过Vue的initProps方法，Vue会对传入的props值进行验证，并让其变成响应式的。然后，我们在子组件中就可以访问this.name的值了。

data示例

再来看一个表示当前时间的Vue组件：

<template>
  <div>{{currentTime}}</div>
</template>

<script>
  export default {
    data () {
      return {
        currentTime: new Date().getTime()
      }
    }
  }
</script>

在这个组件中，我们定义了一个初始值为当前时间的data属性currentTime。这个值将通过Vue的initData方法来实现响应式。

随着时间的推移，currentTime会不断更新，但因为在修改前currentTime已经通过defineReactive方法变成了响应式的，所以此时Vue会在组件内部触发相关的生命周期函数和更新操作，从而保证currentTime的值及时地更新到组件的视图中。