周陆军博客

Appearance

On this page

0. 前言 ​

与实例方法不同，实例方法是将方法挂载到Vue的原型上，而全局API是直接在Vue上挂载方法。在Vue中，全局API一共有12个，分别是Vue.extend、Vue.nextTick、Vue.set、Vue.delete、Vue.directive、Vue.filter 、Vue.component、Vue.use、Vue.mixin、Vue.observable、Vue.version。这12个API中有的是我们在日常业务开发中经常会用到的，有的是对Vue内部或外部插件提供的，我们在日常业务开发中几乎用不到。接下来我们就对这12个API逐个进行分析，看看其内部原理都是怎样的。

1. Vue.extend ​

1.1 用法回顾 ​

其用法如下：

javascript
Vue.extend( options )

  • 参数：

    • {Object} options

  • 作用：

    使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

    data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

    html
    <div id="mount-point"></div>
    javascript
    // 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('##mount-point')

    结果如下：

    html
    <p>Walter White aka Heisenberg</p>

1.2 原理分析 ​

通过用法回顾我们知道，Vue.extend的作用是创建一个继承自Vue类的子类，可接收的参数是一个包含组件选项的对象。

既然是Vue类的子类，那么除了它本身独有的一些属性方法，还有一些是从Vue类中继承而来，所以创建子类的过程其实就是一边给子类上添加上独有的属性，一边将父类的公共属性复制到子类上。接下来，我们就来看看源码是如何实现这个过程的。

该API的定义位于源码的src/core/global-api/extend.js中，如下：

javascript
Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
        return cachedCtors[SuperId]
    }

    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production' && name) {
        validateComponentName(name)
    }

    const Sub = function VueComponent (options) {
        this._init(options)
    }
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(
        Super.options,
        extendOptions
    )
    Sub['super'] = Super

    if (Sub.options.props) {
        initProps(Sub)
    }
    if (Sub.options.computed) {
        initComputed(Sub)
    }

    // allow further extension/mixin/plugin usage
    Sub.extend = Super.extend
    Sub.mixin = Super.mixin
    Sub.use = Super.use

    // create asset registers, so extended classes
    // can have their private assets too.
    ASSET_TYPES.forEach(function (type) {
        Sub[type] = Super[type]
    })
    // enable recursive self-lookup
    if (name) {
        Sub.options.components[name] = Sub
    }

    Sub.superOptions = Super.options
    Sub.extendOptions = extendOptions
    Sub.sealedOptions = extend({}, Sub.options)

    // cache constructor
    cachedCtors[SuperId] = Sub
    return Sub
}

可以看到，虽然代码量稍微有点多，但是逻辑并不复杂，下面我们就来逐行分析一下。

首先，该函数内部定义了几个变量，如下：

javascript
extendOptions = extendOptions || {}
const Super = this
const SuperId = Super.cid
const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
  • extendOptions：用户传入的一个包含组件选项的对象参数；
  • Super：指向父类，即基础 Vue类；
  • SuperId：父类的cid属性，无论是基础 Vue类还是从基础 Vue类继承而来的类，都有一个cid属性，作为该类的唯一标识；
  • cachedCtors：缓存池，用于缓存创建出来的类；

接着，在缓存池中先尝试获取是否之前已经创建过的该子类，如果之前创建过，则直接返回之前创建的。之所以有这一步，是因为Vue为了性能考虑，反复调用Vue.extend其实应该返回同一个结果，只要返回结果是固定的，就可以将结果缓存，再次调用时，只需从缓存中取出结果即可。在API方法定义的最后，当创建完子类后，会使用父类的cid作为key，创建好的子类作为value，存入缓存池cachedCtors中。如下：

javascript
if (cachedCtors[SuperId]) {
    return cachedCtors[SuperId]
}

接着，获取到传入的选项参数中的name字段，并且在开发环境下校验name字段是否合法，如下：

javascript
const name = extendOptions.name || Super.options.name
if (process.env.NODE_ENV !== 'production' && name) {
    validateComponentName(name)
}

接着，创建一个类Sub，这个类就是将要继承基础Vue类的子类，如下：

javascript
const Sub = function VueComponent (options) {
    this._init(options)
}

到这里，我们已经把类创建好了，接下来的工作就是让该类去继承基础Vue类，让其具备一些基础Vue类的能力。

首先，将父类的原型继承到子类中，并且为子类添加唯一标识cid，如下：

javascript
Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub
Sub.cid = cid++

接着，将父类的options与子类的options进行合并，将合并结果赋给子类的options属性，如下：

javascript
Sub.options = mergeOptions(
    Super.options,
    extendOptions
)

接着，将父类保存到子类的super属性中，以确保在子类中能够拿到父类，如下：

javascript
Sub['super'] = Super

接着，如果选项中存在props属性，则初始化它，如下：

javascript
if (Sub.options.props) {
    initProps(Sub)
}

function initProps (Comp) {
  const props = Comp.options.props
  for (const key in props) {
    proxy(Comp.prototype, `_props`, key)
  }
}

初始化props属性其实就是把参数中传入的props选项代理到原型的_props中。

接着，如果选项中存在computed属性，则初始化它，如下：

javascript
if (Sub.options.computed) {
    initComputed(Sub)
}

function initComputed (Comp) {
  const computed = Comp.options.computed
  for (const key in computed) {
    defineComputed(Comp.prototype, key, computed[key])
  }
}

初始化props属性就是遍历参数中传入的computed选项，将每一项都调用defineComputed函数定义到子类原型上。此处的defineComputed函数与我们之前在生命周期初始化阶段initState中所介绍的defineComputed函数是一样的。

接着，将父类中的一些属性复制到子类中，如下：

javascript
Sub.extend = Super.extend
Sub.mixin = Super.mixin
Sub.use = Super.use

export const ASSET_TYPES = [
  'component',
  'directive',
  'filter'
]
// create asset registers, so extended classes
// can have their private assets too.
ASSET_TYPES.forEach(function (type) {
    Sub[type] = Super[type]
})
// enable recursive self-lookup
if (name) {
    Sub.options.components[name] = Sub
}

接着，给子类新增三个独有的属性，如下：

javascript
Sub.superOptions = Super.options
Sub.extendOptions = extendOptions
Sub.sealedOptions = extend({}, Sub.options)

最后，使用父类的cid作为key，创建好的子类Sub作为value，存入缓存池cachedCtors中。如下：

javascript
// cache constructor
cachedCtors[SuperId] = Sub

最终将创建好的子类Sub返回。

以上，就是Vue.extend的所有逻辑。其实总体来讲，整个过程就是先创建一个类Sub，接着通过原型继承的方式将该类继承基础Vue类，然后给Sub类添加一些属性以及将父类的某些属性复制到Sub类上，最后将Sub类返回。

2. Vue.nextTick ​

2.1 用法回顾 ​

其用法如下：

javascript
Vue.nextTick( [callback, context] )

  • 参数：

    • {Function} [callback]
    • {Object} [context]

  • 作用：

    在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

    javascript
    // 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

    2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

2.2 原理分析 ​

该API的原理同实例方法 $nextTick原理一样，此处不再重复。唯一不同的是实例方法 $nextTick 中回调的 this 绑定在调用它的实例上。

3. Vue.set ​

3.1 用法回顾 ​

其用法如下：

javascript
Vue.set( target, propertyName/index, value )

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index
    • {any} value

  • 返回值：设置的值。

  • 作用：

    向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

3.2 原理分析 ​

该API的原理同实例方法 $set原理一样，此处不再重复。

4. Vue.delete ​

4.1 用法回顾 ​

其用法如下：

javascript
Vue.delete( target, propertyName/index )

  • 参数：

    • {Object | Array} target
    • {string | number} propertyName/index

    仅在 2.2.0+ 版本中支持 Array + index 用法。

  • 作用：

    删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除的限制，但是你应该很少会使用它。

    在 2.2.0+ 中同样支持在数组上工作。

4.2 原理分析 ​

该API的原理同实例方法 $delete原理一样，此处不再重复。

5. Vue.directive ​

5.1 用法回顾 ​

其用法如下：

javascript
Vue.directive( id, [definition] )

  • 参数：

    • {string} id
    • {Function | Object} [definition]

  • 作用：

    注册或获取全局指令。

    javascript
    // 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

// getter，返回已注册的指令
var myDirective = Vue.directive('my-directive')

5.2 原理分析 ​

从用法回顾中可以知道，该API是用来注册或获取全局指令的，接收两个参数：指令id和指令的定义。这里需要注意一点的是：注册指令是将定义好的指令存放在某个位置，获取指令是根据指令id从存放指令的位置来读取指令。至于如何让指令生效的问题我们会在指令篇单独展开介绍。

下面我们就来看一下该API的内部实现原理，其代码如下：

javascript
Vue.options = Object.create(null)
Vue.options['directives'] = Object.create(null)

Vue.directive= function (id,definition) {
    if (!definition) {
        return this.options['directives'][id]
    } else {
        if (type === 'directive' && typeof definition === 'function') {
            definition = { bind: definition, update: definition }
        }
        this.options['directives'][id] = definition
        return definition
    }
}

可以看到，我们在Vue类上创建了options属性，其属性值为一个空对象，并且在options属性中添加了directives属性，其值也是一个空对象，这个directives属性就是用来存放指令的位置。如下：

javascript
Vue.options = Object.create(null)
Vue.options['directives'] = Object.create(null)

前文我们说了，该API可以用来注册或获取全局指令，这两种功能的切换取决于是否传入了definition参数。如果没有传入definition参数，则表示为获取指令，那么就从存放指令的地方根据指令id来读取指令并返回，如下：

javascript
if (!definition) {
    return this.options['directives'][id]
}

如果传入了definition参数，则表示为注册指令，那么继续判断definition参数是否是一个函数，如果是函数，则默认监听bind和update两个事件，即将definition函数分别赋给bind和update两个属性。如下：

javascript
if (type === 'directive' && typeof definition === 'function') {
    definition = { bind: definition, update: definition }
}

如果definition参数不是一个函数，那么即认为它是用户自定义的指令对象，直接将其保存在this.options['directives']中，如下：

javascript
this.options['directives'][id] = definition

以上，就是Vue.directives的所有逻辑。

6. Vue.filter ​

6.1 用法回顾 ​

其用法如下：

javascript
Vue.filter( id, [definition] )

  • 参数：

    • {string} id
    • {Function} [definition]

  • 作用：

    注册或获取全局过滤器。

    javascript
    // 注册
Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

6.2 原理分析 ​

从用法回顾中可以知道，该API是用来注册或获取全局过滤器的，接收两个参数：过滤器id和过滤器的定义。同全局指令一样，注册过滤器是将定义好的过滤器存放在某个位置，获取过滤器是根据过滤器id从存放过滤器的位置来读取过滤器。至于如何让过滤器生效的问题我们会在过滤器篇单独展开介绍。

下面我们就来看一下该API的内部实现原理，其代码如下：

javascript
Vue.options = Object.create(null)
Vue.options['filters'] = Object.create(null)

Vue.filter= function (id,definition) {
    if (!definition) {
        return this.options['filters'][id]
    } else {
        this.options['filters'][id] = definition
        return definition
    }
}

可以看到，同全局指令一样，Vue.options['filters']是用来存放全局过滤器的地方。还是根据是否传入了definition参数来决定本次操作是注册过滤器还是获取过滤器。如果没有传入definition参数，则表示本次操作为获取过滤器，那么就从存放过滤器的地方根据过滤器id来读取过滤器并返回；如果传入了definition参数，则表示本次操作为注册过滤器，那就直接将其保存在this.options['filters']中。

7. Vue.component ​

7.1 用法回顾 ​

其用法如下：

javascript
Vue.component( id, [definition] )

  • 参数：

    • {string} id
    • {Function | Object} [definition]

  • 作用：

    注册或获取全局组件。注册还会自动使用给定的id设置组件的名称

    javascript
    // 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

7.2 原理分析 ​

从用法回顾中可以知道，该API是用来注册或获取全局组件的，接收两个参数：组件id和组件的定义。 同全局指令一样，注册全局组件是将定义好的组件存放在某个位置，获取组件是根据组件id从存放组件的位置来读取组件。

下面我们就来看一下该API的内部实现原理，其代码如下：

javascript
Vue.options = Object.create(null)
Vue.options['components'] = Object.create(null)

Vue.filter= function (id,definition) {
    if (!definition) {
        return this.options['components'][id]
    } else {
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
            validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
            definition.name = definition.name || id
            definition = this.options._base.extend(definition)
        }
        this.options['components'][id] = definition
        return definition
    }
}

可以看到，同全局指令一样，Vue.options['components']是用来存放全局组件的地方。还是根据是否传入了definition参数来决定本次操作是注册组件还是获取组件。如果没有传入definition参数，则表示本次操作为获取组件，那么就从存放组件的地方根据组件id来读取组件并返回；如果传入了definition参数，则表示本次操作为注册组件，如果是注册组件，那么在非生产环境下首先会校验组件的name值是否合法，如下：

javascript
if (process.env.NODE_ENV !== 'production' && type === 'component') {
    validateComponentName(id)
}

接着，判断传入的definition参数是否是一个对象，如果是对象，则使用Vue.extend方法将其变为Vue的子类，同时如果definition对象中不存在name属性时，则使用组件id作为组件的name属性。如下：

javascript
if (type === 'component' && isPlainObject(definition)) {
    definition.name = definition.name || id
    definition = this.options._base.extend(definition)
}

最后，将注册好的组件保存在this.options['components']中。

8 directive、filter、component小结 ​

通过对Vue.directive、Vue.filter和Vue.component这三个API的分析，细心的你肯定会发现这三个API的代码实现非常的相似，是的，这是我们为了便于理解故意拆开的，其实在源码中这三个API的实现是写在一起的，位于源码的src/core/global-api/index,js和src/core/global-api/assets,js中，如下：

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

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

ASSET_TYPES.forEach(type => {
    Vue[type] = function (id,definition) {
        if (!definition) {
            return this.options[type + 's'][id]
        } else {
            if (process.env.NODE_ENV !== 'production' && type === 'component') {
                validateComponentName(id)
            }
            if (type === 'component' && isPlainObject(definition)) {
                definition.name = definition.name || id
                definition = this.options._base.extend(definition)
            }
            if (type === 'directive' && typeof definition === 'function') {
                definition = { bind: definition, update: definition }
            }
            this.options[type + 's'][id] = definition
            return definition
        }
    }
})

9. Vue.use ​

9.1 用法回顾 ​

其用法如下：

javascript
Vue.use( plugin )

  • 参数：

    • {Object | Function} plugin

  • 作用：

    安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

    该方法需要在调用 new Vue() 之前被调用。

    当 install 方法被同一个插件多次调用，插件将只会被安装一次。

9.2 原理分析 ​

从用法回顾中可以知道，该API是用来安装Vue.js插件的。并且我们知道了，该API内部会调用插件提供的install 方法，同时将Vue 作为参数传入。另外，由于插件只会被安装一次，所以该API内部还应该防止 install 方法被同一个插件多次调用。下面我们就来看一下该API的内部实现原理。

该API的定义位于源码的src/core/global-api/use.js中，代码如下：

javascript
Vue.use = function (plugin) {
    const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
    if (installedPlugins.indexOf(plugin) > -1) {
        return this
    }

    // additional parameters
    const args = toArray(arguments, 1)
    args.unshift(this)
    if (typeof plugin.install === 'function') {
        plugin.install.apply(plugin, args)
    } else if (typeof plugin === 'function') {
        plugin.apply(null, args)
    }
    installedPlugins.push(plugin)
    return this
}

可以看到，在该函数内部，首先定义了一个变量installedPlugins,该变量初始值是一个空数组，用来存储已安装过的插件。首先判断传入的插件是否存在于installedPlugins数组中（即已被安装过），如果存在的话，则直接返回，防止重复安装。如下：

javascript
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []))
if (installedPlugins.indexOf(plugin) > -1) {
    return this
}

接下来获取到传入的其余参数，并且使用toArray方法将其转换成数组，同时将Vue插入到该数组的第一个位置，这是因为在后续调用install方法时，Vue必须作为第一个参数传入。如下：

javascript
const args = toArray(arguments, 1)
args.unshift(this)

在用法回顾中说了，传入的插件可以是一个提供了 install 方法的对象。也可以是一个函数，那么这个函数会被作为 install 方法。所以在接下来会根据这两种不同的情况分别处理。

首先，判断传入的插件如果是一个提供了 install 方法的对象，那么就执行该对象中提供的 install 方法并传入参数完成插件安装。如下：

javascript
if (typeof plugin.install === 'function') {
    plugin.install.apply(plugin, args)
}

如果传入的插件是一个函数，那么就把这个函数当作install方法执行，同时传入参数完成插件安装。如下：

javascript
else if (typeof plugin === 'function') {
    plugin.apply(null, args)
}

插件安装完成之后，将该插件添加进已安装插件列表中，防止重复安装。如下：

javascript
installedPlugins.push(plugin)

以上，就是Vue.use的所有逻辑。

10. Vue.mixin ​

10.1 用法回顾 ​

其用法如下：

javascript
Vue.mixin( mixin )

  • 参数：

    • {Object} mixin

  • 作用：

    全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

10.2 原理分析 ​

从用法回顾中可以知道，该API是用来向全局注册一个混入，即可以修改Vue.options属性，并且会影响之后的所有Vue实例，这个API虽然在日常的业务开发中几乎用不到，但是在编写Vue插件时用处非常大。下面我们就来看一下该API的内部实现原理。

该API的定义位于源码的src/core/global-api/mixin.js中，代码如下：

javascript
Vue.mixin = function (mixin: Object) {
    this.options = mergeOptions(this.options, mixin)
    return this
}

可以看到，该API的实现非常简单。因为上文中我们说了，该API就是通过修改Vue.options属性进而影响之后的所有Vue实例。所以我们只需将传入的mixin对象与this.options合并即可，然后将合并后的新对象作为this.options传给之后的所有Vue实例，从而达到改变其原有特性的效果。

11. Vue.compile ​

11.1 用法回顾 ​

其用法如下：

javascript
Vue.compile( template )

  • 参数：

    • {string} template

  • 作用：

    在 render 函数中编译模板字符串。只在独立构建时有效

    javascript
    var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

11.2 原理分析 ​

从用法回顾中可以知道，该API是用来编译模板字符串的，我们在日常业务开发中几乎用不到，它内部是调用了compileToFunctions方法，如下：

javascript
Vue.compile = compileToFunctions;

关于compileToFunctions方法在模板编译篇已经做了非常详细的介绍，此处不再重复。

12. Vue.observable ​

12.1 用法回顾 ​

其用法如下：

javascript
Vue.observable( object )

  • 参数：

    • {Object} object

  • 用法：

    让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。

    返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：

    javascript
    const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

12.2 原理分析 ​

从用法回顾中可以知道，该API是用来将一个普通对象转化成响应式对象。在日常业务开发中也几乎用不到，它内部是调用了observe方法，关于该方法在数据变化侦测篇已经做了非常详细的介绍，此处不再重复。

13. Vue.version ​

13.1 用法回顾 ​

其用法如下：

javascript
Vue.version

  • 细节：提供字符串形式的 Vue 安装版本号。这对社区的插件和组件来说非常有用，你可以根据不同的版本号采取不同的策略。

  • 用法：

    javascript
    var version = Number(Vue.version.split('.')[0])

if (version === 2) {
  // Vue v2.x.x
} else if (version === 1) {
  // Vue v1.x.x
} else {
  // Unsupported versions of Vue
}

13.2 原理分析 ​

从用法回顾中可以知道，该API是用来标识当前构建的Vue.js的版本号，对于日常业务开发几乎用不到，但是对于插件编写非常有用，可以根据Vue版本的不同从而做一些不同的事情。

该API是在构建时读取了package.json中的version字段，然后将其赋值给Vue.version。