「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
源码目录相关注释
- comipler 模板解析的相关文件
- core 核心代码
- platforms 对应的两个平台
- server服务端渲染相关
- sfc 解析vue文件变成一个对象
- shared 定义的工具方法
打开源码从入口开始
引入代码时会优先采用module 如果找不到则会加载main对应文件
-
package.json
- "main": "dist/vue.runtime.common.js",
- "module": "dist/vue.runtime.esm.js"
-
查看npm run build的结果
- "build": "node scripts/build.js"
-
查看build.js,build中会基于config文件来实现打包
- 'web-runtime-cjs-dev' 只包含runtime
- 'web-runtime-cjs-prod'
- 'web-full-cjs-dev' 包含runtime+compiler
- 'web-full-cjs-prod'
- 'web-runtime-esm' 只包含runtime (es6 module)
- 'web-full-esm' 包含runtime+compiler(es6 module)
- .......
找到打包前的文件 web/entry-runtime-with-compiler
-
entry-runtime-with-compiler
- 找到对应platforms下的web下的entry-runtime-with-compiler文件
- './runtime/index' Vue在runtime/index中定义
-
./runtime/index
- 引入了 'core/index'中的Vue
-
core/index
- './instance/index' 引入了Vue
- initGlobalAPI() 初始化全局API
-
instance/index
然后就可以找到最终的Vue构造函数
我们直接打开 entry-runtime-with-compiler下的这个文件
在此文件中包装了$mount方法，如果有template会将template转化成render函数, 如果有render会先调用render，没有render会找模板是不是 #号方式引入.如果不是就找外部模板
-
compileToFunctions
- 词法分析
- 语法分析
- 生成代码
- new Function，转化成render函数
同样 打开runtime/index.js下的文件
- Vue.prototype.patch 提供了__patach__方法
- mount方法，会调用挂载组件的方法
core/index.js - initGlobalApi 初始化全局api方法
initGlobalAPI中包括以下几个
- Vue.util 初始化vue的工具方法
- Vue.set 响应式变化的方法
- Vue.delete
- Vue.nextTick
- Vue.component
- Vue.directive
- Vue.filter
那么 new Vue之后发生了哪些流程？
instance/index vue的构造函数中默认会调用this._init方法
// 初始化vue生命周期流程以及响应式流程启动
initMixin(Vue) // _init
// 初始实例属性和方法 $set$delete$watch 挂载与实例相关的方法
stateMixin(Vue)
// vue实例中事件相关的方法 $on$once$once$off$emit
eventsMixin(Vue)
// 生命周期相关方法 $forceUpdate $destroy
lifecycleMixin(Vue)
// 渲染函数 提供_render方法
renderMixin(Vue)
