VUE源码学习第五篇--new Vue都干了啥(初始化)

一、第三部分:初始化相关功能

我们继续上一章,第三部分是对各类功能的初始化。这个章节内容较多,大家还需有耐心。

   /**
     *第三部分,初始化相关功能
     */
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

1、initProxy

initProxy的作用是设置vm._renderProxy。

首先判断当前是否为开发环境,如是,则调用initProxy,否则直接将vm对象赋值给vm._renderProxy.Proxy是ES6新增特性,大家可以先了解下相关知识。我们先来看下initProxy。

initProxy = function initProxy (vm) {
    if (hasProxy) {
      // determine which proxy handler to use
      var options = vm.$options;
      var handlers = options.render && options.render._withStripped
        ? getHandler
        : hasHandler;
      vm._renderProxy = new Proxy(vm, handlers);
    } else {
      vm._renderProxy = vm;
    }
  };

这段主要是给vm._renderProxy设置一个代理,进行一些拦截,不符合的策略(对象上不存在的属性,或者映射表中没有的),提示告警,至于vm._renderProxy是什么,我们后面详细描述。

2、initLifecycle

initLifecycle的作用是初始化一系列变量

先看下前一段代码:

  var options = vm.$options;
  // locate first non-abstract parent
  var parent = options.parent;
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent;
    }
    parent.$children.push(vm);
  }

源码中注释翻译成中文的意思是,定位到第一个非抽象的父组件。要了解非抽象组件,那我们先了解下抽象组件,官方定义是:"自身不会渲染一个 DOM 元素,也不会出现在父组件链中",keep-alive以及transition都是这类组件,说白了,就是不对其包裹的内容进行渲染,保留其状态。不是抽象组件的组件都是非抽象组件。

    parent不是为undefined,并且标记位非抽象,通过while循环父组件链,找出第一个非抽象的组件,并赋值为parent,该parent的子组件数据添加vm对象,形成一个环形链表。

我们继续看剩余的代码:

 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

主要是对vm对象的相关属性初始化,可以查阅VUE官方文档实例属性进行了解。

3、initEvents

initEvents的作用存储父组件绑定当前子组件的事件,保存到vm._events中。

 Vue中的事件分为两种,一种是DOM原始的事件,比如click,focus等,另一种就是自定义事件,对事件机制不了解的可以看VUE探索第五篇-组件(Component),下面我们来用具体的实例描述事件如何存储到vm._events中的。


...
var childComponent =  Vue.component('child',{
     template:"

{{childMsg}}

", data:function(){ return { childMsg:"Hello child" } }, created:function(){ console.log("子组件created"); }, props:['msg1','msg2'], methods:{ showMsg:function(){ this.$emit('childclick', '子组件抛出去吧'); } } }); var vm = new Vue({ el:"#app", components:{ childComponent }, created () { console.log('组件 created') }, data:{ msg:'tttt' }, methods:{ getMsg:function(data){ console.log(data); }, postMsg () { console.log('父组件中响应的') }, parentCreate(){ console.log("父组件 created"); } } })

child组件上绑定了三个事件,分别是childclick(自定义),click(dom原生,需要加上.native),以及钩子事件(@hook:created)。

看下initEvent源码,代码不多,寥寥几行。

function initEvents (vm) {
  //初始化vm._events对象
  vm._events = Object.create(null);
  //是否存在hook:钩子事件
  vm._hasHookEvent = false;
  // init parent attached events
  var listeners = vm.$options._parentListeners;
  if (listeners) {
    updateComponentListeners(vm, listeners);
  }
}

第一行,初始化一个vm._events对象。

第二行,定义了一个标识位_hasHookEvent,用来表示是否有hook:这种钩子事件,hook:可以从父组件上定义子组件的生命周期钩子。

第三行,获取_parentListeners,表示父组件对子组件的监听。这个属性在父组件vm上是没有的,在子组件childComponent对象上的值是

_parentListeners存储了其中的两个事件,有同学在这里可能有两个疑惑,这个_parentListeners是什么时候赋值的?为何没有看到原始dom的事件(click)?

第一个问题涉及到到组件的创建流程,后续专门阐述。第二个问题,需要理解下“父组件绑定当前组件(子组件)的事件”,原始dom事件显然不属于这个范畴,实际上它有单独的处理流程,这里不展开讲。

至此我们已经获取到了事件对象,下面调用updateComponentListeners完成对事件的保存。

export function updateComponentListeners (
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, vm)
  target = undefined
}

该方法有三个入参,vm表示childComponent对象本身,listeners即_parentListeners对象,oldListeners为undefined。

第一行,暂时缓存vm对当前target对象。当执行流程完成后在第三行重置。target在后面的remove中用的着。

主要看下updateListeners方法,

export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  vm: Component
) {
  //定义变量
  let name, def, cur, old, event
  //循环遍历事件监听对象
  for (name in on) {
    //为def,cur赋值事件对象
    def = cur = on[name]
    //oldOn为undefined,故old也是undefined
    old = oldOn[name]
    //对name进行.passive、.capture和.once的修饰符判(&,!,~)
    event = normalizeEvent(name)
    /* istanbul ignore if */
    //对weex框架的支持,暂不研究
    if (__WEEX__ && isPlainObject(def)) {
      cur = def.handler
      event.params = def.params
    }
    //判断cur是否为undefined(不存在),即报错
    if (isUndef(cur)) {
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (isUndef(old)) {//判断old对象是否为undefined,当old不存在时执行
      if (isUndef(cur.fns)) {//判断新对象的fns对象是否为undefined
        //创建事件函数调用器
        cur = on[name] = createFnInvoker(cur)
      }
      //添加新的事件处理
      add(event.name, cur, event.once, event.capture, event.passive, event.params)
    } else if (cur !== old) {//如果新对象与老对象不一致,则用新的覆盖
      old.fns = cur
      on[name] = old
    }
  }
  //遍历oldOn事件,如果在当前事件中找不到,就说明是待老化的,执行删除操作
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

该方法是核心部分,主要作用监听事件的变化,对于新增的事件调用add方法保存,对于老化的事件调用remove方法删除。

具体细节请看相关的注释。这里我们主要看下add和remove方法。

function add (event, fn, once) {
  if (once) {//一次性事件
    target.$once(event, fn)
  } else {
    target.$on(event, fn)
  }
}

这是我们看到$once,$on方法,对这两个方法不了解的可以看下VUE API。这些方法封装在eventsMixin中(该方法我们在第二章节全局API初始化时介绍过)

Vue.prototype.$on = function (event: string | Array, fn: Function): Component {
    const vm: Component = this
    if (Array.isArray(event)) {//如果event是数组,则递归调用
      for (let i = 0, l = event.length; i < l; i++) {
        this.$on(event[i], fn)
      }
    } else {//将新增的事件push到vm._events数组中
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      //有:hook钩子事件则标注为true
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }

该方法主要就是将事件push到vm._events[]中。继续看下$once

Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    function on () {//删除后执行
      vm.$off(event, on)
      fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
  }

这里用了一个讨巧的方式,重新封装了on方法,调用$off方法删除事件,再执行一次。

再看下remove方法。

function remove (event, fn) {
  target.$off(event, fn)
}

调用了target.$off方法删除,还记得的target吧,就是当前的组件对象。

Vue.prototype.$off = function (event?: string | Array, fn?: Function): Component {
    const vm: Component = this
    // all
    //不传入参数,则全部删除,vm._events置为空
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events
    //对于event数组,则递归调用
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$off(event[i], fn)
      }
      return vm
    }
    // specific event
    //以下是对单个事件进行处理.
    //查找该事件的监听数组
    const cbs = vm._events[event]
    //事件监听如不存在,则直接返回实例
    if (!cbs) {
      return vm
    }
    //如果监听事件为空,则置空该事件的监听数组
    if (!fn) {
      vm._events[event] = null
      return vm
    }
    //如果指定了监听事件,循环找出该事件,从监听数组中删除
    if (fn) {
      // specific handler
      let cb
      let i = cbs.length
      while (i--) {
        cb = cbs[i]
        if (cb === fn || cb.fn === fn) {
          cbs.splice(i, 1)
          break
        }
      }
    }
    return vm
  }

看下面的vm._events的数据结构,这段代码就不难理解,将对应的监听事件从数组中删除。

至此,initEvents分析完成,正如开头所讲,它的作用是存储父组件绑定当前子组件的事件,打印下vm._events结果:

VUE源码学习第五篇--new Vue都干了啥(初始化)_第1张图片

保存好后接下来就是触发事件,即$emit,在本篇callhook章节会调用。

4、initRender

initRender 定义vm._c和 vm.$createElement方法

Vue有两种方法编写html内容,一种就是我们常用的template,另一种就是render。render在有些情况下会比template更加简洁,不熟悉的同学可以先了解下render相关知识,我们将上面的例子中template改写成render函数。

render:function(createElement){
            return createElement('div',
                                   [createElement('p',
                                                  {
                                                    on:{
                                                    click:this.showMsg
                                                    }
                                                  },
                                                  this.childMsg
                                                  )
                                   ]
                                )
                                   
     },

      无论是template,还是我们的手写的render,最后都会将描述成VDOM,VDOM的内容我们后续专门章节描述。

接下来我们看下initRender源码。

export function initRender (vm: Component) {
  //初始化_vnode,staticTrees属性
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  //获取父vnode
  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
  const renderContext = parentVnode && parentVnode.context
  //将 dom 节点映射成 Slot
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  //作用域插槽赋值
  vm.$scopedSlots = emptyObject
  // bind the createElement fn to this instance
  // so that we get proper render context inside it.
  // args order: tag, data, children, normalizationType, alwaysNormalize
  // internal version is used by render functions compiled from templates
  //定义._c方法,对template进行render处理的方法
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  // normalization is always applied for the public version, used in
  // user-written render functions.
  //.$createElement方法对render处理的方法
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  // $attrs & $listeners are exposed for easier HOC creation.
  // they need to be reactive so that HOCs using them are always updated
  // $attrs & $listeners这个属性进行数据监听
  const parentData = parentVnode && parentVnode.data

  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

    首先对_vnode与_staticTrees进行初始化。接着对$slots,$scopedSlots赋值。vm._c与vm.$createElement分别是对template和render函数处理的方法,这里只定义,现阶段做个大概的了解即可,相关的内容我们在编译的章节仔细详解。

 调用defineReactive实现对$attrs与$listeners的监听,该方法在后面响应式原理章节中详解。

5、callHook(vm, 'beforeCreate')

我们先来讲下callHook方法,负责调用生命周期的钩子相关方法。

export function callHook (vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  //记录当前watch的实例
  pushTarget()
  //获取相应钩子的事件处理方法数组
  const handlers = vm.$options[hook]
  //执行对应的事件方法
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  //触发@hook:定义的钩子方法
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  //释放当前的watch实例
  popTarget()
}

这部分代码比较清晰,pushTarget,popTarget是数据响应的相关方法,后续再详解。

   callHook(vm, 'beforeCreate')就是从vm.$options中拿到beforeCreate的钩子方法数组(在上一篇我们专门讲了vm.$options,将定义Vue对象时相关的方法都保存在该对象中,其中就包括自定义的生命周期的方法),传入vm对象作为上下文(this),循环执行。

  接下来判断vm._hasHookEvent是否为true,这就是initEvents中定义的标识,在该章节实例中的子组件定义了

@hook:created="parentCreate"

所以就会触发该方法,我们看下$emit方法,该方法在eventsMixin中有定义。

  Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    ...
    //获取该事件对应的事件处理器数组
    let cbs = vm._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      //循环执行
      for (let i = 0, l = cbs.length; i < l; i++) {
        try {
          cbs[i].apply(vm, args)
        } catch (e) {
          handleError(e, vm, `event handler for "${event}"`)
        }
      }
    }
    return vm
  }

此时,仅做了一些方法的初始化,还没有涉及到state,provide等属性,所以在beforeCreate中调用el,data都是undefined。以VUE源码学习第三篇--new Vue都干了啥(概述)的样例为例:

 beforeCreate:function(){
     console.log("beforeCreate");
     console.log("this el:"+this.$el);//undefined
     console.log("this data:"+this.$data);//undefined
      console.log("this msg:"+this.msg);//undefined
   }

6、initInjections和initProvide

initInjections获取inject定义的各属性值并增加对该属性的监听。

initProvide设置 vm._provided值,以便子组件逐级查找。

 inject与provide配合实现了属性的多级传递,官方的说法"以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效"。具体的用法大家可参考下官网API,

export function initInjections (vm: Component) {
  //将inject保存到result字面量对象对象中
  const result = resolveInject(vm.$options.inject, vm)
  //增加该属性的监听
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      /* istanbul ignore else */
      if (process.env.NODE_ENV !== 'production') {
        defineReactive(vm, key, result[key], () => {
          warn(
            `Avoid mutating an injected value directly since the changes will be ` +
            `overwritten whenever the provided component re-renders. ` +
            `injection being mutated: "${key}"`,
            vm
          )
        })
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}

前面我们分析过normalizeInject方法,主要是将inject规整后设置给vm.$options。我们继续看下initInject,该方法主要分两部分:

1、resolveInject方法中,通过inject属性查到到对应父级组件上的provide的值,并保存到result字面量对象中,格式如下:{foo: "this is foo"}。

2、增加对该属性的监听。

我们来分析下第一部分(resolveInject),第二部分关于属性的监听,我们会在后面响应式原理一起说。

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)
    //判断是否支持ES6的特性Symbol和Reflect,支持则采用Reflect.ownKeys,否则采用Object.keys
    const keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(key => {
        /* istanbul ignore next */
        //筛选可枚举的属性
        return Object.getOwnPropertyDescriptor(inject, key).enumerable
      })
      : Object.keys(inject)
    //对key数组进行循环
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]

      const provideKey = inject[key].from
      let source = vm
      //向上查找父级组件对象的provide上包含key的对象,并保存到result中
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) {
          result[key] = source._provided[provideKey]
          break
        }
        source = source.$parent
      }
      if (!source) {//如果没有父级组件匹配上,则判断是否有default值 
        if ('default' in inject[key]) {
          //将default值赋值给属性对象
          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
  }
}

这部分的代码逻辑也比较清晰:

1、过滤出inject定义的属性。

2、逐级向上查找属性在父级组件对象上的provide定义值,并保存到result中。

3、如果没有查到,就启用default值,default值如果都没有,不好意思,给出提示告警。

      这里有个知识点,关于Reflect.ownKeys和Object.keys的区别。Object.keys是表示给定对象的所有可枚举属性的字符串数组( Object.getOwnPropertyNames中可枚举的属性);Reflect.ownKeys不含包括Object.keys的属性,还包括了 Symbol 属性。官方文档中有以下说明"在该对象中(inject)你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作"。

initProvide比较简单,大家看下代码即可明白。

export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

7、initState

initState从源码中可以很清楚看到是对prop,method,data,computed,watch的初始化。

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)
  }
}

接下来我们一个一个看。

(1)initProps

initProps获取props属性的值,并增加监听。

前一章节我们讲到通过normalizeProps方法,将props进行了规整,该实例规整后vm.$options.props格式如下:

VUE源码学习第五篇--new Vue都干了啥(初始化)_第2张图片

这个例子中包含了两个属性对象likes,title。initProps方法将会对这个对象进行再次加工。

function initProps (vm: Component, propsOptions: Object) {
  //获取父组件的propsData,该属性主要是用于测试
  const propsData = vm.$options.propsData || {}
  //存放最终的props对象到vm._props
  const props = vm._props = {}
  //将props的key缓存到vm.$options._propKeys,为了后续更新时的快速的查找,而不需要动态的枚举
  const keys = vm.$options._propKeys = []
  const isRoot = !vm.$parent
  // root instance props should be converted
  if (!isRoot) {
    toggleObserving(false)
  }
  //循环处理props的属性对象
  for (const key in propsOptions) {
    //存储key
    keys.push(key)
    //1、校验props,包括对类型的校验以及产生最后的属性值
    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 (vm.$parent && !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 {
      //2、对props的各属性进行赋值,并进行监听
      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.
    //3、代理到vm对象上,使用vm.xx或者组件中this.xx直接访问props属性
    if (!(key in vm)) {
      proxy(vm, `_props`, key)
    }
  }
  toggleObserving(true)
}

首先定义了属性对象以及key存放的位置,为vm._props以及vm.$options._propKeys,然后对props中的每个属性对象进行循环,在该循环中,做了如下的处理:

1、对props对象校验,并获取属性对象的值,比如like的值是“this is like phone”。当前没有的话就是undefined。

2、调用defineReactive对props(vm._props)赋值,并添加属性监听(在响应式原理部分将详细讲解)

3、调用proxy将props的属性对象代理到vm上,使用vm.xx或者组件中this.xx直接访问props属性。

执行完成后,上面的例子最后生成的vm._props对象为:

(2)initMethods

是对methods的初始化,将methods定义的方法绑定到vm上,我们看下源码:

function initMethods (vm: Component, methods: Object) {
  const props = vm.$options.props
  for (const key in methods) {
    if (process.env.NODE_ENV !== 'production') {
      if (methods[key] == null) {
        warn(
          `Method "${key}" has an undefined value in the component definition. ` +
          `Did you reference the function correctly?`,
          vm
        )
      }
      //判断props中是否已经定义了该方法,如果是,则提示已经定义,可见props的优先级要大于method中定义
      if (props && hasOwn(props, key)) {
        warn(
          `Method "${key}" has already been defined as a prop.`,
          vm
        )
      }
      //判断vm对象中是否已经定了该方法,如是则提示冲突,尽量不要以_ 或者 $打头,这个是vue自带属性和方法的命名规范,避免冲突
      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[key]绑定到vm上,并将methods[key]的this指向vm
    vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
  }
}

首先校验了props以及vm已有的方法是否冲突,然后将方法绑定到vm对象上。比如我们定义了如下的method的

 methods:{
    postMsg () {
      console.log('父组件中响应的')
    }
}

执行完成后,会绑定到vm对象上

VUE源码学习第五篇--new Vue都干了啥(初始化)_第3张图片

(3) initData

对data的初始化,主要是对定义的属性建立钩子函数,实现数据的绑定。代码如下:

function initData (vm: Component) {
  let data = vm.$options.data
  //保存data到vm._data中,判断data是否是function类型,对于组件必须是function
  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
  //代理到vm实例上
  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]
    //确保data的属性不与method与props命名冲突
    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)//代理到vm对象上
    }
  }
  // observe data
  //运行 observe 函数建立起 Observer 和钩子函数
  observe(data, true /* asRootData */)
}

首先从vm.$options.data获取data对象,并根据是否是function类型(组件必须是该类型)进行处理,转化为统一的字面量对象。接下来,与props类似,代理到vm对象上,最重要的是,调用observe建立Observer和劫持钩子函数,后续数据的变化都会触发其watcher对象,实现数据的绑定(这个方法在响应式原理章节再表)

对于组件,官方文档说话:"data必须申明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数,每次创建一个新实例后,我们能够调用 data 函数,从而返回初始数据的一个全新副本数据对象”。

我们看怎么实现的,答案在getData中。

return data.call(vm, vm)

将vm对象设置为上下文,即this,所以,data中的this就是创建的新实例对象。

(4) initComputed

computed是vue重要的属性,与method相比,计算属性是基于它们的依赖进行缓存的,即计算属性中的涉及到的变量不变化的情况下,采用缓存的值,只在相关依赖发生改变时它们才会重新求值。我们来看下是如何实现的。

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) {
    //1、获取getter方法
    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
      )
    }

    if (!isSSR) {
      // create internal watcher for the computed property.
      //2、创建watcher订阅类
      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.
    if (!(key in vm)) {
      //3、绑定到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)
      }
    }
  }
}

循环computed中每个属性,对属性进行如下的处理:

1、获取getter方法,如果没有显性定义,则默认是该函数。

2、创建watcher的订阅类(响应式原理章节再表)

3、绑定到vm对象上,计算属性值。

继续看defineComputed定义。

export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  const shouldCache = !isServerRendering()
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : userDef
    sharedPropertyDefinition.set = noop
  } else {
    ....
  }
  //绑定到vm对象上,并对计算属性的getter和setter进行劫持
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

通过Object.defineProperty实现对计算属性的getter和setter方法的劫持。调用getter方法时,实际调用createComputedGetter方法。

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      //依赖收集,将订阅类添加到
      watcher.depend()
      //返回值
      return watcher.evaluate()
    }
  }
}

将定义的watcher类,加入到发布器dep中,实现依赖收集,当依赖变量发生变化,触发计算属性的重新计算。并返回其计算后的值。

对于这部分知识,目前阶段仅做了解,在后面的响应式原理章节中,我们会重点分析。

(5) initWatch

watch对属性的观察,当属性有变化时,会回调定义的函数,具体的实现方式可以参阅watch官方文档,

function initWatch (vm: Component, watch: Object) {
  //循环watch中的属性
  for (const key in watch) {
    const handler = watch[key]
    //包含多个handle,则循环创建watcher
    if (Array.isArray(handler)) {
      for (let i = 0; i < handler.length; i++) {
        //创建watcher对象
        createWatcher(vm, key, handler[i])
      }
    } else {
      createWatcher(vm, key, handler)
    }
  }
}

为每个handle回调函数创建一个watcher对象。

function createWatcher (
  vm: Component,
  expOrFn: string | Function,
  handler: any,
  options?: Object
) {
  //如果是options对象,则取出handler对象
  if (isPlainObject(handler)) {
    options = handler
    handler = handler.handler
  }
  //如果是方法名,则获取方法实体
  if (typeof handler === 'string') {
    handler = vm[handler]
  }
  //创建watch对象
  return vm.$watch(expOrFn, handler, options)
}

根据不同的表达,进一步获取handle方法,调用vm.&watch创建

  Vue.prototype.$watch = function (
    expOrFn: string | Function,
    cb: any,
    options?: Object
  ): Function {
    const vm: Component = this
    //如果cb还是字面量对象,则继续调用createWatcher
    if (isPlainObject(cb)) {
      return createWatcher(vm, expOrFn, cb, options)
    }
    options = options || {}
    options.user = true
    //创建watcher对象,进行监听
    const watcher = new Watcher(vm, expOrFn, cb, options)
    //设置了immediate,则立即调用
    if (options.immediate) {
      cb.call(vm, watcher.value)
    }
    return function unwatchFn () {
      watcher.teardown()
    }
  }

我们看到new Watcher对象,将这个对象添加到属性(expOrFn)的Dep中,每次对应的属性发送变化,都会触发回调函数(cb)执行。

同样,对于这 部分知识,当前阶段大家仅做了解即可,后面我们会专门分析。

8、callHook(vm, 'created')

调用create生命周期钩子方法,同5。此时已经初始化了相关属性,所以能获取到值,但是el节点还没有挂载,依然为undefined。以VUE源码学习第三篇--new Vue都干了啥(概述)的样例为例:

created:function(){
    console.log("created");
     console.log("this el:"+this.$el);//undefined
     console.log("this data:"+this.$data);//[object Object]
     console.log("this msg:"+this.msg);//tttt
   }

二、总结

本章节内容较多,主要是初始化相关的工作,我们再来回顾下这张导图。

VUE源码学习第五篇--new Vue都干了啥(初始化)_第4张图片

你可能感兴趣的:(前端技术)