一、第一部分:属性设置

第一部分比较简单,主要设置vm的两个属性。

vm._uid = uid++

定义了vm唯一标识_uid属性,每次new Vue都会递增。

 // a flag to avoid this being observed
 vm._isVue = true

定义vm的_isVue属性为true,这个属性从注释看是为了vm对象避免被observed,大家可以先认为和数据响应有关,后续再关注。

其实第一部分还有一段代码,

if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
}

和第三部分的这段遥相呼应,主要作用是测试中间代码的执行性能,有兴趣的同学可以了解下window.performance

/* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

好了,接下来就是本章节的重点部分了。

二、第二部分:options合并

第二部分代码是对options的合并。目的是将相关的属性和方法都放到vm.$options中,看看是怎么实现的。

if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }

    当满足第一个条件,即是component组件时调用initInternalComponent方法,由于当前是new Vue对象,不是组件,这部分暂时不表,等组件部分再介绍。

     那进入另一个条件分支,调用mergeOptions方法实现options的合并,该方法有三个参数,第一个是resolveConstructorOptions方法返回值(vm.constructor的options),第二是new Vue时传入的值(自定义的options),第三个是vue对象本身。mergeOptions就是通过一系列的合并策略,将Vue的构造函数以及自定义的options进行合并

1、resolveConstructorOptions

进入resolveConstructorOptions方法

export function resolveConstructorOptions (Ctor: Class<Component>) {
  let options = Ctor.options
  //如果不是vue的子类(vue.extend),则undefined
  if (Ctor.super) {
    const superOptions = resolveConstructorOptions(Ctor.super)
    const cachedSuperOptions = Ctor.superOptions
    if (superOptions !== cachedSuperOptions) {
      // super option changed,
      // need to resolve new options.
      Ctor.superOptions = superOptions
      // check if there are any late-modified/attached options (#4976)
      const modifiedOptions = resolveModifiedOptions(Ctor)
      // update base extend options
      if (modifiedOptions) {
        extend(Ctor.extendOptions, modifiedOptions)
      }
      options = Ctor.options = mergeOptions(superOptions, Ctor.extendOptions)
      if (options.name) {
        options.components[options.name] = Ctor
      }
    }
  }
  return options
}

  该方法的入参是vm.constructor,即构造函数Vue,如果对原型相关知识不熟悉,可以参考我的文章ES6系列教程第五篇--Class基本知识

执行完第一句,我们来看下Ctor.options(即Vue.options)

在这之前,我们没有定义任何这些属性,那这些怎么来的,我们前面介绍了Vue对象是进过层层封装的。

我们从src/platforms/web/entry-runtime-with-compiler.js,看看对options的配置。

import Vue from './runtime/index'
...
export default Vue

该层封装没有对options设置,暂时不表,继续跟踪runtime/index.js

import Vue from 'core/index'
...
// install platform runtime directives & components
extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)
....
export default Vue

该层在Vue.options上扩展了两个属性,分别为directives以及components

继续跟踪core/index.js,这个文件我们在上一章节分析过,其中调用了initGlobalAPI方法。

...
//Vue.options初始化
Vue.options = Object.create(null)
  ASSET_TYPES.forEach(type => {
    Vue.options[type + 's'] = Object.create(null)
  })
  Vue.options._base = Vue

  //扩展构建Vue.options.components
  extend(Vue.options.components, builtInComponents)
...

终于找到了源头,对Vue.options属性对象进行了初始化,

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]

Vue中对象的初始化很多使用了Object.create(null)语句,这种方式创建的对象,其原型为null,对象更纯净些。

接下来将_base设置为Vue对象本身,并扩展了compontents对象。

我们来梳理下Vue.options构造过程。

再回到resolveConstructorOptions方法,继续执行,判断Ctor.super,用Vue.extend构造子类时,就会添加一个super属性,由于没有使用extend方法,Ctor.super为undefined,后面我们再做分析。

一句话总结,resolveConstructorOptions返回构造函数的options。

2、mergeOptions

mergeOptions位于core/util/options.js,总览下代码

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    //1、合法性校验检查组件名称的合法性
    checkComponents(child)
  }

  //如果传入的是类型是function,则取其options
  if (typeof child === 'function') {
    child = child.options
  }
  //2、格式规整,格式化props
  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)
  //3、extends与mixins处理
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  //4、使用不同的策略进行合并
  const options = {}
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
}

该方法有三个入参,parent为resolveConstructorOptions返回的值(Vue的构造函数的options),child是我们new Vue时传入的数组对象(自定义的options),vm是Vue对象本身。方便起见,下面我们就用parent和child来称呼这两种options。

(1)合法性校验

if (process.env.NODE_ENV !== 'production') {
    //检查组件名称的合法性
    checkComponents(child)
  }

这段主要是包含的组件名称的合法性校验, 包括不能与html标签冲突,名称包含字符,数字,连接符,并要以字母开头等。

var vm = new Vue({
    el:"#app",
    ...
    components:{
      childComponent,
      secondComponent
    }
})

如果创建对象时传入的参数type为function,则取其options

 //如果传入的是类型是function,则取其options
  if (typeof child === 'function') {
    child = child.options
  }

(2)输入规整 

接下代码是对下面的child属性格式化,对各种输入进行规整,为何有这步呢?由于child是自定义的,在开发时有多种写法,那么就有必要在运行前做个统一。

//格式化
  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)

 我们以normalizeProps为例,具体看下如何规整。先回顾下props,通过props实现对子组件的数据传递,vue对props的定义有两种实现方式。

    //数组模式
    props: ['title', 'likes', 'isPublished', 'commentIds', 'author'],
    ...
    //对象模式
    props:{
      title:{
        type:String,
        default:"this is zte phone"
      },
      likes:{
        type:String,
        default:"this like phone"
      }
    }

 normalizeProps代码:

function normalizeProps (options: Object, vm: ?Component) {
  const props = options.props
  if (!props) return
  const res = {}
  let i, val, name
  if (Array.isArray(props)) {//对数组的处理
    ....
  } else if (isPlainObject(props)) {//对对象的处理
    ...
  } else if (process.env.NODE_ENV !== 'production') {
    warn(
      `Invalid value for option "props": expected an Array or an Object, ` +
      `but got ${toRawType(props)}.`,
      vm
    )
  }
  options.props = res
}

 这段代码比较清晰,分别对两种不同模式的props进行处理,注意下用isPlainObject判断是否简单对象,是指用字面量或者new Object创建的对象。处理后结果如下所示,这样两种写法在实现了结构上的统一。

normalizeInject是对Inject的处理,Inject不怎么常用,大家可以参考下inject,处理方式与normalizeProps类似,大家可以自行学习下。

normalizeDirectives是对指令函数简写的处理,如果有不熟悉的可以参考指令章节,我们增加个指令

var vm = new Vue({
    el:"#app",
	data:{
        msg:'tttt'
	},
    directives:{
      color:function (el, binding) {
          el.style.backgroundColor = binding.value
        }
    }
})

处理后结构如下,将方法自动赋值给bind和updata钩子。

(3)extends与minxins处理

接下的一段代码就是对extends和mixins属性的处理。递归调用mergeOptions方法,将入参中的extends与mixins合并到parent上。

//对extends以及mixins属性的处理
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }

判断是否有extends与mixins属性,并调用mergeOptions进行递归合并,我们先来看下这两个属性的用法。

  const mixins1={
    created(){
      console.log('mixins created');
    }
  }
  const mixins2 = {
    created () {
      console.log('mixins2 created')
    }
  }

  const extend = {
    created () {
      console.log('extends created')
    }
  }

var vm = new Vue({
    el:"#app",
    mixins: [mixins1, mixins2],
    extends: extend,
    created () {
      console.log('组件 created')
    }
})

需要注意的是mixins属性接受的数组,而extends只能接受一个对象。执行这段代码的结果是:

执行的顺序,entends要优于mixins,mixins要优于Vue对象定义。所以created方法要按照这个顺序在options中保存下。

对extends以及mixins对象的遍历合并后,parent的对象最终如下:

大家可能会有疑惑,为何要将extend与mixins设置到parent上呢,这些为了后面的策略合并准备的。

(4)合并策略

到此,child与parent上的数据都已准备完毕,接下来就是对child和parent的上相同的属性的合并,以上面的created为例,Vue对象(child)定义的created要与Vue构造函数(parent)的created如何合并,是替换,还是组合?

var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }
  function mergeField (key) {
    var strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key], vm, key);
  }

对每种属性(key)有不同的合并策略strat[key],我们以钩子函数的合并为例。定义钩子函数的合并策略的处理方法为megeHook

var LIFECYCLE_HOOKS = [
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeUpdate',
  'updated',
  'beforeDestroy',
  'destroyed',
  'activated',
  'deactivated',
  'errorCaptured'
];

...

LIFECYCLE_HOOKS.forEach(function (hook) {
  strats[hook] = mergeHook;
});

我们继续看下megeHook函数定义

function mergeHook (
  parentVal,
  childVal
) {
  return childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : Array.isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
}

这是个嵌套的三元表达式,判断childVal是否值,如果没有则直接返回parentVal,否则继续;判断parentVal是否有值,如果有值则concat连接,否则继续;判断childVal是否是数组,如果是,直接返回,否则转成array。

上面例子中的created钩子函数,在parent和child上都有,所以需要concat连接。我们看下情况是否如此:

created数组增加了child定义的方法,个数由3个变成了4个。

对上面的疑惑是不是有了解答,extends与mixins中定义的各类属性设置到parent上后,就可以通过统一的过程实现与对象中的定义的属性合并。

对其他属性的合并策略我们就不一一分析代码,总体原则:parent与child两者中只有一个有值,则就直接使用该值,如果两者都有,则视情况:

beforeCreate/created/...:child的属性通过contact连接到parent后面。

watch:child的属性通过contact连接到parent后面。

props/methods/computed:child中属性值的覆盖parent的属性值。

data/provide:child中的属性值覆盖parent的属性值。

component/directive/filter:child中的属性值覆盖parent的属性值。

合并完成后返回options,赋值为vm.$options,至此,第二部分完成。

四、总结

本章节重点介绍了options的合并,合并的目的是将相关的属性和方法都放到vm.$options中,为后续的调用做准备工作。

   options的属性有两个来源,一个是Vue的构造函数(parent),通过resolveConstructorOptions获取和构建的;一个是new Vue是传入的(child)。

  准备工作完成后,通过各属性不同的合并策略,对parent和child相同属性进行合并。最终生成统一的options。

上一篇:VUE源码学习第三篇--new Vue都干了啥(概述)

Logo

前往低代码交流专区

更多推荐