VUE【version:2.4.1】

Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后出不来~

从package.json文件知道我们在执行命令npm run dev(只是以dev为例prod一样) 对应的是config.js文件里面的web-full-dev,然后找到config.js文件

config.js
'web-full-dev': {
entry: resolve('web/entry-runtime-with-compiler.js'),
}

这里就能清楚的知道配置入口文件是 entry-runtime-with-compiler.js

entry-runtime-with-compiler.js
import config from 'core/config'
import Vue from './runtime/index'
export default Vue

这里我就只主要写出了文件的导入和导出,这里就能知道这个文件只是为了导出一个Vue,那这个Vue具体的来源呢,继续看import的Vue的来源

runtime/index.js
import Vue from 'core/index'

该怎样继续不用啰嗦了,继续找 core/index.js

你会发现最后找到了 instance/index.js

此时你已经找到了核心初始化的代码!

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,并且整个Vue的核心方法都到场了

1.//初始化的入口,各种初始化工作
2.initMixin(Vue)
3.//数据绑定的核心方法,包括常用的$watch方法
4.stateMixin(Vue)
5.//事件的核心方法,包括常用的$on,$off,$emit方法
6.eventsMixin(Vue)
7.//生命周期的核心方法
8.lifecycleMixin(Vue)
9.//渲染的核心方法,用来生成render函数以及VNode
10.renderMixin(Vue)

至此,我们已经找到核心VUE文件入口,这个instance/index.js文件经过mixin各个模块之后返回了构造函数Vue,以examples文件夹里面commits例子来说明,当我们new Vue()的时候,就调用这个构造函数,然后代码从this._init(options)进入主题!

后续在进行下面各个功能模块探究!

VUE 源码学习01 源码入口的更多相关文章

  1. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  2. Spring源码学习01:IntelliJ IDEA2019.3编译Spring5.3.x源码

    目录 Spring源码学习01:IntelliJ IDEA2019.3编译Spring5.3.x源码 前言 工欲善其事必先利其器.学习和深读Spring源码一个重要的前提:编译源码到我们的本地环境.这 ...

  3. 【 js 基础 】【 源码学习 】源码设计 (持续更新)

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析第二部分:undersc ...

  4. 【 js 基础 】【 源码学习 】源码设计 (更新了backbone分析)

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析 第二部分:unders ...

  5. 【requireJS源码学习01】了解整个requireJS的结构

    前言 现在工作中基本离不开requireJS这种模块管理工具了,之前一直在用,但是对其原理不甚熟悉,整两天我们来试着学习其源码,而后在探寻其背后的AMD思想吧 于是今天的目标是熟悉requireJS整 ...

  6. 【iScroll源码学习01】准备阶段

    前言 我们昨天初步了解了为什么会出现iScroll:[SPA]移动站点APP化研究之上中下页面的iScroll化(上),然后简单的写了一个demo来模拟iScroll,其中了解到了以下知识点: ① v ...

  7. jQuery 源码学习 - 01 - 简洁的 $('...')

    首先贴上学习参考资料:[深入浅出jQuery]源码浅析--整体架构,备用地址:chokcoco/jQuery-. jQuery 库,js 开发的一个里程碑,它的出现,让网页开发者们告别荒蛮的上古时代, ...

  8. Vue2.x源码学习笔记-源码目录结构整理

    先从github上下载或者clone一个vue分支项目 https://github.com/vuejs/vue 查看下目录结果 先列出一些目录 Vue |— build 打包相关的配置文件,其中最重 ...

  9. async源码学习 - 全部源码

    因为工作需要,可能我离前端走远了,偏node方向了.所以异步编程的需求很多,于是乎,不得不带着学习async了. 我有个习惯,用别人的东西之前,喜欢稍微搞明白点,so就带着看看其源码. github: ...

随机推荐

  1. java进程/线程;堆和栈;多线程

    一.进程和线程 进程:在内存中运行的应用程序,一个exe是一个进程. 如:ps -exf  可以查看各个应用的进程,其中ppid为父进程: ps aux | egrep '(cron|syslog)' ...

  2. phoenix

    phoenix(直译做凤凰)的操作sql是通过jdbc发送到HBase的.phoenix的查询语句会转化为hbase的scan操作和服务器端的过滤器.如果我们手工使用HBase的api去写这些代码,也 ...

  3. [js学习笔记] 原型链理解

    js中只有对象,包括对象,函数,常量等. prototype 只有函数里有这个属性. 对象里可以设置这个属性,但是没这个属性的意义 prototype指向一个对象,可以添加想要的方法. 该对象里有一个 ...

  4. pycharm 2017新建文件添加编码方式等

    file->setting->Editor->File and Code Templates->Python Script 添加 #!/usr/bin/python3# -*- ...

  5. oracle pl/sql 控制结构(分支,循环,控制)

    一.pl/sql的进阶--控制结构在任何计算机语言(c,java,pascal)都有各种控制语句(条件语句,循环结构,顺序控制结构...),在pl/sql中也存在这样的控制结构.在本部分学习完成后,希 ...

  6. AngularJS -- 指令(创建自定义指令)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   什么是指令 注:本指南是针对已经熟悉AngularJS基础知识的开发人员.如果你才刚 ...

  7. Net知识图谱

    对于Web系统开发来说,Net其实也是有好多知识点需要学的,虽然目前JAVA是主流,就业市场比较大,但Net也在积极的拥抱开源,大Net Core 2 出来了,这无疑给Net开发者带来更大的希望,好了 ...

  8. Linux系统centOS7在虚拟机下的安装及XShell软件的配置

    前面的话 本文将详细介绍Linux系统centOS7在虚拟机下的安装 准备工作 [系统下载] 在安装centOS7之前,首先在官网下载合适的版本 然后,选择一个链接下载即可 [虚拟机配置] 接下来,需 ...

  9. 【原】Spark 编程指南

    尊重原创,注重版权,转贴请注明原文地址:http://www.cnblogs.com/vincent-hv/p/3322966.html   1.配置程序使用资源: System.setPropert ...

  10. pongo英雄会-幸运数题解

    显然我们只要知道1~x范围有多少幸运数(用f(x)表示),lucky(x,y)=f(y)-f(x-1). 解法1. 计算排列数 由于y<=1000000000这个规模,我们不能暴力验证每个数是否 ...