Vue源码分析之Vue实例初始化详解

这一节主要记录一下：vue 的初始化过程

以下正式开始：

vue官网的生命周期图示表

重点说一下 new vue()后的初始化阶段，也就是created之前发生了什么。

initlifecycle 阶段

export function initlifecycle (vm: component) {
 const options = vm.$options

 // locate first non-abstract parent
 let parent = options.parent
 if (parent && !options.abstract) {
  while (parent.$options.abstract && parent.$parent) {
   parent = parent.$parent
  }
  parent.$children.push(vm) // 自己把自己添加到父级的$children数组中
 }

 vm.$parent = parent // 父组件实例
 vm.$root = parent ? parent.$root : vm // 根组件 如果不存在父组件，则本身就是根组件

 vm.$children = [] // 用来存放子组件
 vm.$refs = {}

 vm._watcher = null 
 vm._inactive = null 
 vm._directinactive = false
 vm._ismounted = false
 vm._isdestroyed = false
 vm._isbeingdestroyed = false
}

接下来是initevents 阶段

// v-on如果写在平台标签上如：div,则会将v-on上注册的事件注册到浏览器事件中
// v-on如果写在组件标签上，则会将v-on注册的事件注册到子组件的事件系统
// 子组件（vue实例）在初始化的时候，有可能接收到父组件向子组件注册的事件。
// 子组件（vue实例）自身模板注册的事件，只要在渲染的时候才会根据虚拟dom的对比结果
// 来确定是注册事件还是解绑事件

// 这里初始化的事件是指父组件在模板中使用v-on注册的事件添加到子组件的事件系统也就是vue的事件系统。
export function initevents (vm: component) {
 vm._events = object.create(null) // 初始化
 vm._hashookevent = false
 // init parent attached events 初初始化腹肌组件添加的事件
 const listeners = vm.$options._parentlisteners
 if (listeners) {
  updatecomponentlisteners(vm, listeners)
 }
}

export function updatecomponentlisteners (
 vm: component,
 listeners: object,
 oldlisteners: ?object
) {
 target = vm
 updatelisteners(listeners, oldlisteners || {}, add, remove, createoncehandler, vm)
 target = undefined
}

initjections 阶段

export function initinjections (vm: component) {
 // 自下而上读取inject
 const result = resolveinject(vm.$options.inject, vm)
 if (result) {
  // 设置为false 避免definereactive函数把数据转换为响应式
  toggleobserving(false)
  object.keys(result).foreach(key => {
    definereactive(vm, key, result[key])
  })
  // 再次更改回来
  toggleobserving(true)
 }
}

export function resolveinject (inject: any, vm: component): ?object {
 if (inject) {
  // inject is :any because flow is not smart enough to figure out cached
  const result = object.create(null)
  // 如果浏览器支持symbol,则使用reflect.ownkyes(),否则使用object.keys()
  const keys = hassymbol
   ? reflect.ownkeys(inject)
   : object.keys(inject)

  for (let i = 0; i < keys.length; i++) {
   const key = keys[i]
   // #6574 in case the inject object is observed...
   if (key === '__ob__') continue
   const providekey = inject[key].from
   let source = vm
   // 当provided注入内容的时候就是把内容注入到当前实例的_provided中
   // 刚开始的时候 source就是实本身，挡在source._provided中找不到对应的值
   // 就会把source设置为父实例
   // vue实例化的第一步就是规格化用户传入的数据，所以inject不管时数组还是对象
   // 最后都会变成对象
   while (source) {
    if (source._provided && hasown(source._provided, providekey)) {
     result[key] = source._provided[providekey]
     break
    }
    source = source.$parent
   }
   // 处理默认值的情况
   if (!source) {
    if ('default' in inject[key]) {
     const providedefault = inject[key].default
     result[key] = typeof providedefault === 'function'
      ? providedefault.call(vm)
      : providedefault
    } else if (process.env.node_env !== 'production') {
     warn(`injection "${key}" not found`, vm)
    }
   }
  }
  return result
 }
}

initstate 阶段

在 vue 中，我们经常会用到 props 、methods 、 watch 、computed 、data 。这些状态在使用前都需要初始化。而初始化的过程正是在 initstate 阶段完成。

因为 injects 是在 initstate 之前完成，所以可以在 state 中使用 injects 。

export function initstate (vm: component) {
 vm._watchers = []
 // 获取到经过初始化的用户传进来的options
 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)
 }
}

initprops

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.
 // 缓存props的key值
 const keys = vm.$options._propkeys = []
 const isroot = !vm.$parent
 // root instance props should be converted
 // 如果不是跟组件则没必要转换成响应式数据
 if (!isroot) {
  // 控制是否转换成响应式数据
  toggleobserving(false)
 }
 for (const key in propsoptions) {
  keys.push(key)
  // 获取props的值
  const value = validateprop(key, propsoptions, propsdata, vm)
  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.
  // 把props代理到vue实例上来，可以直接通过this.props访问
  if (!(key in vm)) {
   proxy(vm, `_props`, key)
  }
 }
 toggleobserving(true)
}

initmethods

function initmethods (vm: component, methods: object) {
 const props = vm.$options.props
 for (const key in methods) {
  if (process.env.node_env !== 'production') {
   // 如果key不是一个函数 报错
   if (typeof methods[key] !== 'function') {
    warn(
     `method "${key}" has type "${typeof methods[key]}" in the component definition. ` +
     `did you reference the function correctly?`,
     vm
    )
   }
   // 如果props中存在同名的属性 报错
   if (props && hasown(props, key)) {
    warn(
     `method "${key}" has already been defined as a prop.`,
     vm
    )
   }
   // isreserved判断是否以$或_开头
   if ((key in vm) && isreserved(key)) {
    warn(
     `method "${key}" conflicts with an existing vue instance method. ` +
     `avoid defining component methods that start with _ or $.`
    )
   }
  }
  // 把methods的方法绑定到vue实例上
  vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm)
 }
}

initdata

function initdata (vm: component) {
 let data = vm.$options.data
 data = vm._data = typeof data === 'function'
  ? getdata(data, vm)
  : data || {}
 // isplainobject监测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
 // 循环data
 while (i--) {
  const key = keys[i]
  if (process.env.node_env !== 'production') {
   // 如果在methods中存在和key同名的属性 则报错
   if (methods && hasown(methods, key)) {
    warn(
     `method "${key}" has already been defined as a data property.`,
     vm
    )
   }
  }
  // 如果在props中存在和key同名的属性 则报错
  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)) {
   // isreserved判断是否以$或_开头
   // 代理data，使得可以直接通过this.key访问this._data.key
   proxy(vm, `_data`, key)
  }
 }
 // observe data
 // 把data转换为响应式数据
 observe(data, true /* asrootdata */)
}

initcomputed

const computedwatcheroptions = { lazy: true }
function initcomputed (vm: component, computed: object) {
 // $flow-disable-line
 const watchers = vm._computedwatchers = object.create(null)
 // computed properties are just getters during ssr
 // 判断是不是服务端渲染
 const isssr = isserverrendering()

 for (const key in computed) {
  const userdef = computed[key]
  const getter = typeof userdef === 'function' ? userdef : userdef.get
  if (process.env.node_env !== 'production' && getter == null) {
   warn(
    `getter is missing for computed property "${key}".`,
    vm
   )
  }
  // 如果不是ssr，则创建watcher实例
  if (!isssr) {
   // create internal watcher for the computed property.
   watchers[key] = new watcher(
    vm,
    getter || noop,
    noop,
    computedwatcheroptions
   )
  }

  // component-defined computed properties are already defined on the
  // component prototype. we only need to define computed properties defined
  // at instantiation here.
  // 如果vm不存在key的同名属性
  if (!(key in vm)) {
   definecomputed(vm, key, userdef)
  } else if (process.env.node_env !== 'production') {
   if (key in vm.$data) {
    warn(`the computed property "${key}" is already defined in data.`, vm)
   } else if (vm.$options.props && key in vm.$options.props) {
    warn(`the computed property "${key}" is already defined as a prop.`, vm)
   }
  }
 }
}
sharedpropertydefinition = {
  enumerable: true,
  cnfigurable： true,
  get: noop,
  set: noop
}
export function definecomputed (
 target: any,
 key: string,
 userdef: object | function
) {
 // 如果是服务端渲染，则computed不会有缓存，因为数据响应式的过程在服务器是多余的
 const shouldcache = !isserverrendering()
 // createcomputedgetter返回计算属性的getter
 // creategetterinvoker返回userdef的getter
 if (typeof userdef === 'function') {
  sharedpropertydefinition.get = shouldcache
   ? createcomputedgetter(key)
   : creategetterinvoker(userdef)
  sharedpropertydefinition.set = noop
 } else {
  // 当userdef为一个对象时
  sharedpropertydefinition.get = userdef.get
   ? shouldcache && userdef.cache !== false
    ? createcomputedgetter(key)
    : creategetterinvoker(userdef.get)
   : noop
  sharedpropertydefinition.set = userdef.set || noop
 }
 if (process.env.node_env !== 'production' &&
   sharedpropertydefinition.set === noop) {
  sharedpropertydefinition.set = function () {
   warn(
    `computed property "${key}" was assigned to but it has no setter.`,
    this
   )
  }
 }
 // 在tearget上定义一个属性， 属性名为key， 属性描述符为sharedpropertydefinition
 object.defineproperty(target, key, sharedpropertydefinition)
}

function createcomputedgetter (key) {
 return function computedgetter () {
  // 查找是否存在key的watcher
  const watcher = this._computedwatchers && this._computedwatchers[key]
  if (watcher) {
   // 如果dirty为true，则重新计算，否则返回缓存
   if (watcher.dirty) {
    watcher.evaluate()
   }
   if (dep.target) {
    watcher.depend()
   }
   return watcher.value
  }
 }
}

function creategetterinvoker(fn) {
 return function computedgetter () {
  return fn.call(this, this)
 }
}

initwatch

function initwatch (vm: component, watch: object) {
 for (const key in watch) {
  const handler = watch[key]
  // 处理数组类型
  if (array.isarray(handler)) {
   for (let i = 0; i < handler.length; i++) {
    createwatcher(vm, key, handler[i])
   }
  } else {
   createwatcher(vm, key, handler)
  }
 }
}

function createwatcher (
 vm: component,
 exporfn: string | function,
 handler: any,
 options?: object
) {
  // isplainobject检查是否是对象
 if (isplainobject(handler)) {
  options = handler
  handler = handler.handler
 }
 if (typeof handler === 'string') {
  handler = vm[handler]
 }
 // 最后调用$watch
 return vm.$watch(exporfn, handler, options)
}

initprovide阶段

export function initprovide (vm: component) {
 const provide = vm.$options.provide
 if (provide) {
  // 把provided存到_provided上
  vm._provided = typeof provide === 'function'
   ? provide.call(vm)
   : provide
 }
}

到这里 vue 的初始化就结束了，接下来就是触发生命周期函数 created 。

总结一下：new vue() 执行之后，vue 进入初始化阶段。

初始化流程如下：

• 规格化 $options ，也就是用户自定义的数据
• initlifecycle 注入生命周期
• initevents 初始化事件，注意：这里的事件是值在父组件在子组件上定义的事件
• initrender
• initjections 初始化 jetction
• initprops 初始化props
• initstate 包括props 、methods 、data 、computed 、watch
• initprovided 初始化 provide

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。