Vue.js 2.0 全局API set、del 源码分析

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在vue2.0源码中的src/core/global-api目录的index下，初始化了全局API，如下：

initGlobalAPI

import config from '../config'
import { initUse } from './use'
import { initMixin } from './mixin'
import { initExtend } from './extend'
import { initAssetRegisters } from './assets'
import { set, del } from '../observer/index'
import { ASSET_TYPES } from 'shared/constants'
import builtInComponents from '../components/index'

import {
  warn,
  extend,
  nextTick,
  mergeOptions,
  defineReactive
} from '../util/index'

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  Object.defineProperty(Vue, 'config', configDef)

  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }

  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick

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

  // this is used to identify the "base" constructor to extend all plain-object
  // components with in Weex's multi-instance scenarios.
  Vue.options._base = Vue

  extend(Vue.options.components, builtInComponents)

  initUse(Vue)
  initMixin(Vue)
  initExtend(Vue)
  initAssetRegisters(Vue)
}

可以看到，在initGlobalAPI中首先给Vue添加了一些config配置属性，这些配置如果修改则会报出警告，这对全局API的分析无影响。接下来在Vue.util的属性中添加了一些方法，可以通过Vue.util.[xx]的方式访问这些方法，但不推荐这么做，util中的方法可能会不定期变更，当然这对全局API的分析也无影响。 接下来给构造函数Vue初始化了一些静态API，set、delete、nextTick 这些方法

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

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

这段代码是给Vue的options对象上初始化了一些对象，结果如下： 通过extend函数,给Vue.components上添加了keepAlive组件，这也是为什么我们能直接使用keepAlive组件的原因

export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

接下来执行一些初始化方法，在构造函数Vue上添加了use、mixin、extend、components、directive、filter这些方法。接下来对挂载的全局方法进行详细分析。

1.set

/**
 * Set a property on an object. Adds the new property and
 * triggers change notification if the property doesn't
 * already exist.
 */
export function set(target: Array<any> | Object, key: any, val: any): any {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  if (key in target && !(key in Object.prototype)) {
    target[key] = val
    return val
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid adding reactive properties to a Vue instance or its root $data ' +
      'at runtime - declare it upfront in the data option.'
    )
    return val
  }
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

export function isUndef (v: any): boolean %checks {
  return v === undefined || v === null
}

export function isPrimitive (value: any): boolean %checks {
  return (
    typeof value === 'string' ||
    typeof value === 'number' ||
    // $flow-disable-line
    typeof value === 'symbol' ||
    typeof value === 'boolean'
  )
}

set方法只能对数组或者对象生效，如果设置的属性值为undefined, null, or primitive value则会发出警告，接下来对设置的属性做判断，如果在数组或者对象中已经存在，则赋予新值并返回； 接下来看下该对象是否含有属性__ob__（该对象是否监听过的标志），被监听的对象也不能是一个vue实例，否则报错； 如果该对象未被监听，则直接返回该值，

defineReactive(ob.value, key, val)
ob.dep.notify()

若一切正常，则给该对象添加响应式属性（通过defineReactive），并通知依赖（通过notify）做相应变更，这两个方法是响应式原理的重要方法，这里不做赘述，但从这里可以看出，Vue.set这个方法是给一个已存在的对象的动态新增属性设置成响应式。 （对于对象或者数组的动态新增方法，没有set的情况下，是不会响应式的，笔者曾经踩过这个坑，所以源码还是有必要学习的啊！！！）

2.delete

/**
 * Delete a property and trigger change if necessary.
 */
export function del(target: Array<any> | Object, key: any) {
  if (process.env.NODE_ENV !== 'production' &&
    (isUndef(target) || isPrimitive(target))
  ) {
    warn(`Cannot delete reactive property on undefined, null, or primitive value: ${(target: any)}`)
  }
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.splice(key, 1)
    return
  }
  const ob = (target: any).__ob__
  if (target._isVue || (ob && ob.vmCount)) {
    process.env.NODE_ENV !== 'production' && warn(
      'Avoid deleting properties on a Vue instance or its root $data ' +
      '- just set it to null.'
    )
    return
  }
  if (!hasOwn(target, key)) {
    return
  }
  delete target[key]
  if (!ob) {
    return
  }
  ob.dep.notify()
}

delete方法与set方法很类似，前面的逻辑跟set是一样的，如果这个属性不在对象中包含，则直接返回，否则通过原生语法delete该属性，如果对象中有__ob__对象，则通知依赖做相应变更；

  Vue.prototype.$set = set
  Vue.prototype.$delete = del

源码中还有上面这段代码，使用原型的方式挂载了set和del方法，这就是我们为什么可以使用this.$xx去调用set和del。