文章目录
1.找到入口
一脸懵逼的跟着大佬来查找,本来要先读src/core目录下的index文件,大佬说先看package.json,跟着走了一圈,才找到Vue的入口。下面是过程
因为最新版的没有了build文件夹,多出一个scripts文件夹,在里面搜索package.json关于打包的“web-full-dev”,
然后根据这个入口文件,一点点的找到vue的出处,只要出现import Vue就对应的向上找即可
/src/platform/web/entry-runtime-with-compiler.js
–> /src/platform/web/runtime/index.js
–> /src/core/index.js
–> /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
2.发现问题
本人小白一枚,刚才看的懵懵的,满脸问好,虽然这个业务逻辑看懂了,但是很多地方还是不明白,所以我们慢慢来.
2.1 第一个是看出现了好多次的process.env,这是个啥
2.2 this._init(option)函数的声明在哪里,干了哪些事
2.3 下面的几个函数又是干啥的
哈哈,基本问了一遍
3. 开始解答
3.1. 解决问题一
这个先看一个介绍Node.js的process模块,原来process指的是process模块,用来与当前进程互动,可以通过全局变量process访问,不必使用require命令加载。它是一个EventEmitter对象的实例。
里面的其他方法可以放一放,找到这一条
ok,太菜了,满屏都是知识点,哈哈
3.2.解决问题二
我用的是sublime,鼠标悬停在_init上看到提示,前面明显是已经导出的文件目录和打包文件目录,所以肯定是同目录下的init.js,打开init.js看到,嗯,有点,挺,复杂,嗯,但是我们知道了这个_init是在这里进行的定义。其他的之后会讲的
3.3解决问题三
3.3.1 initMixin(Vue)的作用
这里要去看一下init.js方法了,先提前说一下,可能会有比我还小白一丢丢的小白可能会看到我的文章,建议看到此处先移步这里,补充一下原型链相关知识:
原型规则——javascript学习
可以看到这里是对Vue的原型方法_init()进行定义
今天先到这啦,明天继续!