版本:2.5.17-beta.0

核心模块(src/core):包括组件、全局API、vue实例、对象属性监测系统、公共方法、虚拟dom、配置等模块

src/core/index.js

import Vue from './instance/index'
import { initGlobalAPI } from './global-api/index'
import { isServerRendering } from 'core/util/env'
import { FunctionalRenderContext } from 'core/vdom/create-functional-component'
//添加全局api
initGlobalAPI(Vue)
//服务端 运行判断
Object.defineProperty(Vue.prototype, '$isServer', {
get: isServerRendering
})
//处理内存泄漏 处理
Object.defineProperty(Vue.prototype, '$ssrContext', {
get () {
/* istanbul ignore next */
return this.$vnode && this.$vnode.ssrContext
}
})
// 不知道干啥的todo
Object.defineProperty(Vue, 'FunctionalRenderContext', {
value: FunctionalRenderContext
})
//__VERSION__是配置的变量
Vue.version = '__VERSION__'
export default Vue

突然发现源码 读起来还好 写出来怎么那么麻烦啊!

initGlobalApi

/* @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 {
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. //在这个地方挂载 util方法
Vue.util = {
warn,
extend,
mergeOptions, //合并options.js
defineReactive //
}
Vue.set = set
Vue.delete = del //方法来自 "../util/index"
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 //keep-alive 组件,点进去就可以看到
extend(Vue.options.components, builtInComponents) //Vue.use()方法
initUse(Vue) //Vue.mixin()方法
initMixin(Vue) //Vue.extend() 方法
initExtend(Vue) //Vue.component, Vue.directive, Vue.filter
initAssetRegisters(Vue)
}

util 方法 extend,mergeOptions,defineReactive,nextTick

extend

/**
* 简单的对象的浅拷贝,有点失望
*/
export function extend (to: Object, _from: ?Object): Object {
for (const key in _from) {
to[key] = _from[key]
}
return to
}

写出来真麻烦

vue源码阅读(一)的更多相关文章

  1. vue源码阅读(二)

    一 一个实例 如果简单了解过些Vue的API的话,肯定会对一下这个特别熟悉,在上一篇里,分析了Vue的核心文件core的index.js构造vue函数执行的流程. 那么下边这个则是实例化构造函数,也就 ...

  2. Vue源码阅读一:说说vue.nextTick实现

    用法: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 疑惑: 怎么实现的延迟回调 原理: JavaScript语言的一大特点就是单线程,同一个时 ...

  3. vue源码阅读笔记

    1.yarn test [文件名]  -t [name-of-spec(describe or test )] 直接运行yarn test,会测试所有测试文件:yarn test 后面只跟文件名的话会 ...

  4. vue 源码阅读记录

    0.webpack默认引入的是vue.runtime.common.js,并不是vue.js,功能有略微差别,不影响使用 1.阅读由ts编译后的js: 入口>构造函数 >定义各类方法 &g ...

  5. 【一套代码小程序&Native&Web阶段总结篇】可以这样阅读Vue源码

    前言 前面我们对微信小程序进行了研究:[微信小程序项目实践总结]30分钟从陌生到熟悉 在实际代码过程中我们发现,我们可能又要做H5站又要做小程序同时还要做个APP,这里会造成很大的资源浪费,如果设定一 ...

  6. 阅读vue源码-----内置组件篇(keep-alive)

    1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...

  7. 大白话Vue源码系列(01):万事开头难

    阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...

  8. 大白话Vue源码系列(02):编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  9. 大白话Vue源码系列(03):生成AST

    阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...

随机推荐

  1. Geometric regularity criterion for NSE: the cross product of velocity and vorticity 1: $u\times \om$

    在 [Chae, Dongho. On the regularity conditions of suitable weak solutions of the 3D Navier-Stokes equ ...

  2. Coursera, Big Data 1, Introduction (week 3)

    什么是分布式文件系统?为什么需要分布式文件系统? 如果文件系统可以管理用网络连接的很多个存储单元,叫分布式文件系统. 分布式文件系统提供了数据可扩展性,容错性,高并发. 这些是传统文件系统不具有的. ...

  3. CentOS 安装 ceph 单机版

    简介 Ceph是一个分布式存储软件. 它支持用3种方式存储数据,分别是:对象存储.块设备存储.分布式文件系统存储. Ceph这个软件,分为3层,最底层是Rados对象存储系统.中间是一个librado ...

  4. lnmp 1.5 mysql数据库开启远程访问

    LNMP默认是禁止远程连接数据库的,但是有时候为了方便,我们想要远程,下面是开启远程的方法 sudo su # 切换为root用户模式,省的接下来操作的时候出现权限问题 mysql -u root - ...

  5. FastDFS使用

    1.在linux系统中安装FastDFS服务image-server.7z 2.导入FastDFS jar包 fastdfs_client_v1.20.jar 3.创建配置文件fastdfs_clie ...

  6. win10+caffe+GPU

    由于学习需要,决定安装caffe,之前用的都是基于theano的keras.听说win下caffe很难配置,经过一个下午和晚上的配置终于成功,以此记录. 我的电脑:win10 64位,N卡GTX950 ...

  7. CentOS7.6编译安装nginx

    配置阿里云yum源 cp /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.bak wget -O /etc/yu ...

  8. 微信H5支付证书过滤

    在对接微信支付,退款的时候,遇到 Caused by: java.lang.RuntimeException: java.io.IOException: DerInputStream.getLengt ...

  9. Mybatis注意点之#与$区别

    动态 SQL 是 mybatis 的强大特性之一,也是它优于其他 ORM 框架的一个重要原因.mybatis 在对 sql 语句进行预编译之前,会对 sql 进行动态解析,解析为一个 BoundSql ...

  10. OpenCV imread读取jpg图像的一个大坑

    长话短说 版本区间[OpenCV3.0.0, OpenCV3.4.1]内的OpenCV,(至少在windows下,使用官方提供的预编译版本),imread读取jpg图片后的像素值,和版本区间[Open ...