Vue源码解读(1)--src/core/index.js 入口文件

tangr206 发布于2019-08-22 17:36 / 1179人阅读

摘要：生产版本设为可以启用检查。只适用于开发模式和支持的浏览器上指定组件的渲染和观察期间未捕获错误的处理函数为的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。

Vue源码主入口:src/core/index.js

import Vue from "./instance/index" // 引用Vue构造器
import { initGlobalAPI } from "./global-api/index" // 调用initGlobalAPI方法，定义全局资源
import { isServerRendering } from "core/util/env"
import { FunctionalRenderContext } from "core/vdom/create-functional-component"

initGlobalAPI(Vue)
...

Vue.version = "__VERSION__"

export default Vue //暴露Vue

打印出Vue构造器的属性及原型对象属性，此时原型对象已额外定义了30个原型对象属性及一个自动获得的constructor(构造函数)属性（Vue.prototype.constructor === Vue）

https://segmentfault.com/img/...

该图片引用自：【Vue源码探究一】当我们引入Vue，我们引入了什么？
然后查看src/core/global-api/index中的initGlobalAPI方法，将Vue构造器作为参数传入

export function initGlobalAPI (Vue: GlobalAPI) {
  // config
  const configDef = {}
  /**
    // 全局配置: config中的参数
    config = {
        optionMergeStrategies: Object.create(null), // 合并策略的选项
        silent: false, // 取消 Vue 所有的日志与警告
        devtools: process.env.NODE_ENV !== "production", // 配置是否允许 vue-devtools 检查代码。开发版本默认为 true，生产版本默认为 false。生产版本设为 true 可以启用检查。
        performance: false, // 设置为 true 以在浏览器开发工具的性能|时间线面板中启用对组件初始化、编译、渲染和打补丁的性能追踪。只适用于开发模式和支持 performance.mark API 的浏览器上
        errorHandler: null, // 指定组件的渲染和观察期间未捕获错误的处理函数
        warnHandler: null, // 为 Vue 的运行时警告赋予一个自定义处理函数。注意这只会在开发者环境下生效，在生产环境下它会被忽略。
        ignoredElements: [],
        keyCodes: Object.create(null), // 给 v-on 自定义键位别名
        isReservedTag: no,
        isReservedAttr: no,
        isUnknownElement: no,
        getTagNamespace: noop,
        parsePlatformTagName: identity,
    }
    **/
  configDef.get = () => config // import config from "../config"
  if (process.env.NODE_ENV !== "production") {
    configDef.set = () => {
      util.warn(
        // Vue.config = {...}会触发setter，设置config中属性不会，Vue.config.silent = true (取消 Vue 所有的日志与警告)
        "Do not replace the Vue.config object, set individual fields instead."
      )
    }
  }
  // 各种全局配置项
  Object.defineProperty(Vue, "config", configDef)
  Vue.util = util // 各种工具函数，及一些兼容性的标志位
  Vue.set = set // Vue.set
  Vue.delete = del // Vue.delete
  Vue.nextTick = util.nextTick

  Vue.options = Object.create(null) // Vue默认提供的资源
  // ASSET_TYPES: ["component", "directive", "filter"]
  config._assetTypes.forEach(type => {
    Vue.options[type + "s"] = Object.create(null)
  })

  Vue.options._base = Vue

  //builtInComponents: {KeepAlive: KeepAlive}
  util.extend(Vue.options.components, builtInComponents)

  initUse(Vue) // Vue.use
  initMixin(Vue) // Vue.minxin
  initExtend(Vue) // Vue.extend
  initAssetRegisters(Vue)
}

GPU云服务器云服务器源码解读 webrtc源码解读 webrtc fec源码解读 js v8源码解读

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95325.html

Vue源码学习（一）——追根究底Vue

摘要：其中执行命令是我们当前所关注的，对于项目的文件结构，我们需要去找到项目的启动的入口文件，接下来我们去一步一步的找到分析命令是一个模块打包器。打算开始学习vue的源码开始，我开始 serach 关键词：vue 源码，可是发现很多都不是我想要看到的东西，所以打算记录下来，学习的记录和日后分享。我在想这个文章的名字时，手把手系列？十分钟系列？小白到大佬系列？都不是，只是单纯的学习笔记文件...

Harriet666 2019-08-23 13:55 评论0 收藏0
Vue2 源码分析

摘要：应用启动一般是通过，所以，先从该构造函数着手。构造函数文件该文件只是构造函数，原型对象的声明分散在当前目录的多个文件中构造函数接收参数，然后调用。源码版本：v2.1.10 分析目标通过阅读源码，对 Vue2 的基础运行机制有所了解，主要是： Vue2 中数据绑定的实现方式 Vue2 中对 Virtual DOM 机制的使用方式源码初见项目构建配置文件为 build/conf...

alin 2019-08-20 14:35 评论0 收藏0
vue源码学习（一）——从入口开始

摘要：学习源码时，我们首先需要看的是文件，该文件里配置了的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。一个是完整版，一个是运行时。运行时用来创建实例渲染并处理虚拟等的代码。基本上就是除去编译器的其它一切。学习vue源码时，我们首先需要看的是package.json文件，该文件里配置了vue的依赖以及开发环境和生产环境的编译的启动脚本等其他信息。首先我们需要关注的是script。我...

ybak 2019-08-23 12:41 评论0 收藏0
Vue源码学习（二）——从宏观看Vue

摘要：上一篇文章我们写到从入口文件一步步找到的构造函数，现在我们要去看看实例化经历的过程的构造函数我们知道的构造函数在中不明白的可以去看上一篇文章源码学习笔记一。上一篇文章我们写到从入口文件一步步找到Vue的构造函数，现在我们要去看看Vue实例化经历的过程 Vue的构造函数我们知道Vue的构造函数在src/core/instance/index.js中,不明白的可以去看上一篇文章 Vue...

AndroidTraveler 2019-08-23 13:59 评论0 收藏0
深入Vue.js从源码开始(二)

摘要：有一点要注意的是，暴露的方法最好不要依赖，因为它可能经常会发生变化，是不稳定的。从入口开始我们之前提到过 Vue.js 构建过程，在 web 应用下，我们来分析 Runtime + Compiler 构建出来的 Vue.js，它的入口是 src/platforms/web/entry-runtime-with-compiler.js：摘选entry-runtime-with-co...

rainyang 2019-08-23 13:40 评论0 收藏0