Vue 入口与 initGlobalAPI实例剖析

 更新时间:2022年08月30日 16:41:10   作者:RiemannHypothesis  
这篇文章主要为大家介绍了Vue 入口与 initGlobalAPI实例剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Vue 的入口

在上面的scripts/alias文件中可以分析出入口是

src/platforms/web/entry-runtime-with-compiler.js

import Vue from './runtime/index'

在这个入口 JS 的上方我们可以找到 Vue 的来源:import Vue from './runtime/index',我们先来看一下这块儿的实现,它定义在 src/platforms/web/runtime/index.js 中:

import Vue from 'core/index'

这里关键的代码是 import Vue from 'core/index',之后的逻辑都是对 Vue 这个对象做一些扩展,可以先不用看,我们来看一下真正初始化 Vue 的地方,在 src/core/index.js 中:

import Vue from './instance/index'

这里有 2 处关键的代码,import Vue from './instance/index' 和 initGlobalAPI(Vue),初始化全局 Vue API(我们稍后介绍),我们先来看第一部分,在 src/core/instance/index.js 中:

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue

在这里,我们终于看到了 Vue 的庐山真面目,它实际上就是一个用 Function 实现的类,我们只能通过 new Vue 去实例化它。

我们往后看这里有很多 xxxMixin 的函数调用,并把 Vue 当参数传入,它们的功能都是给 Vue 的 prototype 上扩展一些方法,Vue 按功能把这些扩展分散到多个模块中去实现,而不是在一个模块里实现所有

initGlobalAPI

Vue.js 在整个初始化过程中,除了给它的原型 prototype 上扩展方法,还会给 Vue 这个对象本身扩展全局的静态方法,它的定义在 src/core/global-api/index.js 中:

/* @flow */
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 { observe } from 'core/observer/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
  // 2.6 explicit observable API
  Vue.observable = <T>(obj: T): T => {
    observe(obj)
    return obj
  }
  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)
}

这里就是在 Vue 上扩展的一些全局方法的定义,Vue 官网中关于全局 API 都可以在这里找到

以上就是Vue 入口与 initGlobalAPI实例剖析的详细内容,更多关于Vue 入口 initGlobalAPI的资料请关注脚本之家其它相关文章!

相关文章

  • 前端elementUI select选择器实现远程搜索

    前端elementUI select选择器实现远程搜索

    这篇文章主要为大家介绍了前端使用elementUI select选择器实现远程搜索,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • three.js实现vr全景图功能实例(vue)

    three.js实现vr全景图功能实例(vue)

    去年全景图在微博上很是火爆了一阵,正好我也做过一点全景相关的项目,下面这篇文章主要给大家介绍了关于three.js实现vr全景图功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • vue 单元测试初探

    vue 单元测试初探

    这篇文章主要介绍了vue 单元测试的相关资料,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue中v-for加载本地静态图片方法

    vue中v-for加载本地静态图片方法

    下面小编就为大家分享一篇vue中v-for加载本地静态图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue 实现高级穿梭框 Transfer 封装过程

    Vue 实现高级穿梭框 Transfer 封装过程

    本文介绍了基于Vue2和Element-UI实现的高级穿梭框组件Transfer的设计与技术方案,组件支持多项选择,并能实时同步已选择项,包含竖版和横版设计稿,并提供了组件的使用方法和源码,此组件具备本地分页和搜索功能,适用于需要在两个列表间进行数据选择和同步的场景
    2024-09-09
  • Vue实现简单可扩展甘特图的方法详解

    Vue实现简单可扩展甘特图的方法详解

    Ganttastic是一个小型的Vue.js组件,用于在Web应用程序上呈现一个可配置的、可拖动的甘特图。本文就将用它来实现简单可扩展的甘特图,感兴趣的可以尝试一下
    2022-11-11
  • vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

    vue3如何将html元素变成canvas(海报生成),进行图片保存/截图

    这篇文章主要介绍了vue3实现将html元素变成canvas(海报生成),进行图片保存/截图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue 实现一个简单的鼠标拖拽滚动效果插件

    Vue 实现一个简单的鼠标拖拽滚动效果插件

    这篇文章主要介绍了Vue 实现一个简单的鼠标拖拽滚动效果插件,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • Vue中的计算属性computed传参方式

    Vue中的计算属性computed传参方式

    这篇文章主要介绍了Vue中的计算属性computed传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • 一文详解Vue3的watch是如何实现监听的

    一文详解Vue3的watch是如何实现监听的

    watch这个API大家都很熟悉,今天这篇文章小编来带你搞清楚Vue3的watch是如何实现对响应式数据进行监听的,希望对大家有一定的帮助
    2024-11-11

最新评论