iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue 入口与 initGlobalAPI实例剖析
  • 412
分享到

Vue 入口与 initGlobalAPI实例剖析

2024-04-02 19:04:59 412人浏览 安东尼
摘要

目录Vue 的入口initGlobalapiVue 的入口 在上面的scripts/alias文件中可以分析出入口是 src/platfORMs/WEB/entry-runtime-

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 中:


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的资料请关注编程网其它相关文章!

--结束END--

本文标题: Vue 入口与 initGlobalAPI实例剖析

本文链接: https://www.lsjlt.com/news/166397.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue 入口与 initGlobalAPI实例剖析
    目录Vue 的入口initGlobalAPIVue 的入口 在上面的scripts/alias文件中可以分析出入口是 src/platforms/web/entry-runtime-...
    99+
    2024-04-02
  • 深入剖析 VUE 中 TypeScript 与 Vuex 的强强联合
    ...
    99+
    2024-04-02
  • 剖析Vue实例:解锁其强大功能
    Vue.js 是一个流行的前端框架,它通过创建和管理 Vue 实例来构建交互式和动态的 Web 应用程序。Vue 实例是应用程序的核心,它管理数据、响应用户交互并渲染用户界面。 响应系统: Vue 实例的核心特征之一是其响应性。当实例中...
    99+
    2024-02-18
    Vue 实例 响应式 组件通信 数据绑定
  • 深入剖析OpenMP锁的原理与实现
    目录前言深入分析 omp_lock_tomp_lock_t 源码分析深入分析 omp_nest_lock_tomp_nest_lock_t 源码分析源代码函数名称不同的原因揭秘总结前...
    99+
    2023-01-28
    OpenMP锁原理 OpenMP锁实现 OpenMP锁
  • PHP框架深入剖析与实战应用
    非常抱歉,由于您没有提供文章标题,我无法为您生成一篇高质量的文章。请您提供文章标题,我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-15
  • Java 接口与抽象类:深入浅出的概念剖析
    主要特性: 只能包含抽象方法,不能有具体实现。 所有方法都默认为 public 和 abstract。 可以扩展多个接口,但不能继承类。 提供了一种抽象层面,关注于方法的定义而不是具体的实现。 抽象类 定义: 抽象类是一种部分抽象的类...
    99+
    2024-04-02
  • 最新SS园设计模式实例剖析与深入解读教程
    │  readme.txt│  ├─创建型模式│      设计模式与UML之创建型模式(第一讲 建造者模式).exe│     ...
    99+
    2023-06-03
  • vue原生input输入框原理剖析
    目录正文v-model正文 首先我们来看一段代码: <input value="value"> 这里是一个原生的input输入框,每一个原生的输入框都会有一个value...
    99+
    2024-04-02
  • 深入剖析 Java 线程池的原理与实践
    原理 线程池维护一个固定大小的线程池,这些线程处于空闲状态,等待处理任务。当一个任务提交给线程池时,它会分配一个空闲线程来执行它。如果所有线程都处于繁忙状态,则新任务将放入队列中等待执行。 线程池的常见参数包括: 核心线程数:线程池中最...
    99+
    2024-03-13
    线程池
  • PHP框架:深入剖析与最佳实践解读
    非常抱歉,由于您没有提供文章标题,我无法为您生成一篇高质量的文章。请您提供文章标题,我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-23
  • Vue新手入门实例分析
    本篇内容介绍了“Vue新手入门实例分析”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! Vue实例和模板语法<body>...
    99+
    2023-06-27
  • 深度剖析:Vue与Less的协同效应
    Vue和Less的概述 Vue是一个轻量级的JavaScript框架,用于构建用户界面。它以其简单性、灵活性以及与其他框架的兼容性而著称。Less是一种CSS预处理器,它允许您使用变量、混合和嵌套规则来定义样式。 Vue和Less的协同效...
    99+
    2024-02-03
    Vue Less 框架 协同 Web应用程序
  • 详解Java单例模式的实现与原理剖析
    目录一、什么是单例模式二、哪些地方用到了单例模式三、单例模式的优缺点优点缺点四、手写单例模式饿汉式枚举饿汉式DCL懒汉式双检锁懒汉式内部类懒汉式小结一、什么是单例模式 单例模式(Si...
    99+
    2024-04-02
  • Java与Go:深入剖析技术优劣势
    java 和 go 的优劣势:语言特性:两者都是强类型、面向对象语言,但 go 的并发支持更出色。性能:go 的 goroutine 带来并发性能优势,而 java 的垃圾回收可能带来开...
    99+
    2024-04-08
    go java 内存占用
  • 深入剖析织梦CMS二次开发技巧与实践
    织梦CMS是一款非常流行的开源网站建设系统,具有易用性和灵活性,深受广大网站开发者和站长的喜爱。但是,有时候我们可能需要对织梦CMS进行一些定制化的二次开发,以满足特定需求或实现特定功...
    99+
    2024-04-02
  • 深入剖析VUE图片懒加载的黑科技
    : 目前浏览器图片懒加载的方式有两种,一种是针对 元素的懒加载,这种方式是浏览器层面实现的懒加载,另一种是基于 JavaScript 实现的懒加载,这种方式可以针对任何元素图片懒加载,操作简单,兼容性好,是较为为主流的图片懒加载方式。 ...
    99+
    2024-02-13
    文章的关键字: VUE 图片懒加载 性能优化
  • Spring Bean的实例化之属性注入源码剖析过程
    前言 这一章节我们来讨论创建Bean过程中的属性注入,在Spring的IOC容器启动过程中,会把定义的Bean封装成BeanDefinition注册到一个ConcurrentHash...
    99+
    2024-04-02
  • 深入剖析Go语言的优点与特色
    Go语言是一种由Google开发的开源编程语言,自问世以来在软件开发领域备受青睐,被誉为一种简洁、高效、并发性能强大的语言。本文将深入剖析Go语言的优点与特色,并结合具体的代码示例进行...
    99+
    2024-04-02
  • Java抽象类与接口实例分析
    这篇“Java抽象类与接口实例分析”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Java抽象类与接口实例分析”文章吧。1.抽...
    99+
    2023-06-30
  • Assert(断言实现机制深入剖析)
    断言(assert)的作用是用来判断程序运行的正确性,确保程序运行的行为与我们理解的一致。其调用形式为assert(logic expression),如果逻辑表达式为假,则调用ab...
    99+
    2022-11-15
    Assert 断言
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作